/* webon Jodit — 커스텀 디자인(아이콘+한글라벨 버튼) + 보안 업로드 팝업 스타일
 * 커스텀 툴바/버튼/팝업 디자인은 archive/custom-editor.css 를 .webon-jodit-editor 로 재스코프.
 * 파일 선택(보안 업로드) 팝업 스타일과 레이아웃은 webon 유지. */

/* ── 레이아웃 / 본문 ── */
.webon-jodit-editor { width: 100%; min-width: 0; max-width: 100%; }
.webon-jodit-editor .jodit-container { width: 100% !important; max-width: 100%; border-color: #d6dde8; border-radius: 8px; overflow: hidden; font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; }
.webon-jodit-editor .jodit-workplace, .webon-jodit-editor .jodit-wysiwyg { min-width: 0; }
.webon-jodit-editor .jodit-wysiwyg { min-height: 320px; padding: 18px; color: #172033; font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; font-size: 18px; line-height: 1.6; letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: anywhere; }
.webon-jodit-editor .jodit-wysiwyg p { margin: 0 !important; }
.webon-jodit-editor .jodit-wysiwyg img { max-width: 100%; }
.webon-jodit-editor .jodit-resizer { z-index: 6; }

/* ── 커스텀 툴바 디자인 (아이콘+한글라벨·소프트그레이·세그먼트·팝업·반응형) ── */
/* ===================================================================
   ⭐ 핵심: 아이콘 + 한글 라벨 동시 표시 + 큰 버튼
   (.webon-jodit-editor 로 감싸 이 에디터에만 적용)
==================================================================== */

/* 1) 툴바를 넉넉하게 */
.webon-jodit-editor .jodit-toolbar__box {
	border-radius: 12px 12px 0 0;
}

.webon-jodit-editor .jodit-toolbar-editor-collection {
	padding: 0;
	row-gap: 0;
	align-items: flex-start; /* 모든 버튼 위쪽 정렬 */
}

/* ⭐ 핵심: Jodit 기본값(버튼 height 고정 + overflow:hidden)이
   아래에 붙인 한글 라벨을 잘라낸다. 상위 컨테이너까지 높이·overflow 해제. */
.webon-jodit-editor .jodit-toolbar__box,
.webon-jodit-editor .jodit-toolbar-editor-collection,
.webon-jodit-editor .jodit-ui-group,
.webon-jodit-editor .jodit-toolbar__item,
.webon-jodit-editor .jodit-toolbar-button {
	height: auto !important;
	min-height: 0 !important;
	overflow: visible !important;
}

/* 2) ⭐ wrapper(span)를 세로 박스로: [아이콘 버튼] 위 + [한글 라벨] 아래
      라벨은 button 이 아닌 wrapper(span) 의 ::after 로 렌더(안정적).
      드롭다운 화살표는 absolute 로 빼서 레이아웃 통일. */
.webon-jodit-editor .jodit-toolbar-button {
	position: relative;
	display: inline-flex !important;
	flex-direction: row; /* 아이콘 + 라벨을 한 줄(가로)로 */
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 4px 11px; /* 소프트 카드: 넉넉한 좌우 여백 */
	gap: 4px;
	flex: 0 0 auto; /* 내용 폭(자연 너비), 좌측 정렬 */
}

/* ⭐ 버튼 그룹을 툴바 전체 너비로 펴서 버튼들이 가로를 꽉 채우게 */
.webon-jodit-editor .jodit-toolbar-editor-collection .jodit-ui-group {
	width: 100% !important;
	flex-wrap: wrap;
}

/* 드롭다운(화살표) 있는 버튼만 우측 공간 확보 */
.webon-jodit-editor
	.jodit-toolbar-button:has(.jodit-toolbar-button__trigger) {
	padding-right: 16px;
}

/* 3) 아이콘 버튼: 모든 버튼 동일 높이(라벨 baseline 통일) */
.webon-jodit-editor .jodit-toolbar-button__button {
	height: 24px;
	min-height: 24px;
	width: auto;
	min-width: 18px;
	padding: 0 1px;
	border-radius: 0;
}

/* 내부 버튼/화살표 배경은 항상 투명 → hover 강조는 wrapper 가 통째로 담당
   (드롭다운의 아이콘부/화살표부가 따로 강조돼 색이 달라 보이는 문제 방지) */
.webon-jodit-editor .jodit-toolbar-button__button,
.webon-jodit-editor .jodit-toolbar-button__button:hover,
.webon-jodit-editor .jodit-toolbar-button__trigger,
.webon-jodit-editor .jodit-toolbar-button__trigger:hover {
	background: transparent !important;
}

/* 4) 아이콘 크기(적당히) */
.webon-jodit-editor .jodit-toolbar-button__icon .jodit-icon,
.webon-jodit-editor .jodit-toolbar-button__icon svg {
	width: 12px;
	height: 12px;
}

/* 5) 빈 기본 텍스트 스팬 숨김 */
.webon-jodit-editor .jodit-toolbar-button__text {
	display: none !important;
}

/* 6) ⭐ 아이콘 아래 한글 라벨 (wrapper aria-label = Jodit 내장 한글 명칭) */
.webon-jodit-editor .jodit-toolbar-button::after {
	content: attr(aria-label);
	margin-left: 1px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	color: #333;
	white-space: nowrap;
}

/* 7) 드롭다운 화살표: 우상단 절대배치 → 정렬 흐트러짐 방지 */
.webon-jodit-editor .jodit-toolbar-button__trigger {
	position: absolute;
	top: 50%;
	right: 2px;
	transform: translateY(-50%);
	width: 11px;
	min-width: 11px;
	height: 16px;
	padding: 0;
}

.webon-jodit-editor .jodit-toolbar-button__trigger svg {
	width: 9px;
	height: 9px;
}

/* 8) 아이템 여백 (버튼 자체 margin 으로 간격 처리하므로 0) */
.webon-jodit-editor .jodit-toolbar-editor-collection .jodit-toolbar__item {
	margin: 0;
}

/* 9) ⭐ 툴바가 2행으로 줄바꿈될 때 행 사이에 생기는 가로 구분선 제거
   (Jodit 이 그룹/컬렉션 pseudo-element·그림자로 줄 구분선을 그림 → 일괄 제거)
   ※ 버튼 라벨은 .jodit-toolbar-button::after 라 영향 없음 / 툴바 상·하단 경계는 유지 */
.webon-jodit-editor .jodit-toolbar-editor-collection::after,
.webon-jodit-editor .jodit-toolbar-editor-collection::before,
.webon-jodit-editor .jodit-ui-group::after,
.webon-jodit-editor .jodit-ui-group::before,
.webon-jodit-editor .jodit-toolbar__item::after,
.webon-jodit-editor .jodit-toolbar__item::before {
	display: none !important;
}

.webon-jodit-editor .jodit-toolbar__box,
.webon-jodit-editor .jodit-toolbar__box *,
.webon-jodit-editor .jodit-toolbar-editor-collection,
.webon-jodit-editor .jodit-ui-group,
.webon-jodit-editor .jodit-toolbar__item {
	box-shadow: none !important;
	background-image: none !important;
}

.webon-jodit-editor .jodit-toolbar-editor-collection,
.webon-jodit-editor .jodit-ui-group,
.webon-jodit-editor .jodit-toolbar__item {
	border-color: transparent !important;
}

/* 10) ⭐ 소프트 그레이(또렷): 흰 버튼 + 미세 그림자, 간격 좁게 */
.webon-jodit-editor .jodit-toolbar-button {
	border: 1px solid #d8dbe0 !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	margin: 2px 1px !important;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
	cursor: pointer !important; /* 버튼 전체(라벨 포함) 클릭 커서 */
	transition: background 0.12s ease, border-color 0.12s ease,
		box-shadow 0.12s ease;
}

/* 컬렉션: 격자선 흔적 제거 */
.webon-jodit-editor .jodit-toolbar-editor-collection {
	border: 0 !important;
	margin: 0 !important;
}

/* 툴바 박스: 연한 카드(둥근 위 모서리 + 하단 구분선) */
.webon-jodit-editor .jodit-toolbar__box {
	padding: 4px !important;
	border: 0 !important;
	border-bottom: 1px solid #e6e9ef !important;
	border-radius: 12px 12px 0 0;
	background: var(--jd-color-panel);
}

/* ⭐ 마우스 오버: 버튼 전체에 부드러운 강조 */
.webon-jodit-editor .jodit-toolbar-button:hover {
	background: var(--jd-color-button-background-hover-opacity40) !important;
	border-color: #c2c6cd !important;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1) !important;
	z-index: 2;
}

/* 11) 반응형: 화면이 좁아질수록 아이콘·글자·여백을 단계적으로 축소 */
@media (max-width: 768px) {
	.webon-jodit-editor .jodit-toolbar-button::after {
		font-size: 11px;
	}
	.webon-jodit-editor .jodit-toolbar-button {
		padding: 2px 6px;
	}
	.webon-jodit-editor
		.jodit-toolbar-button:has(.jodit-toolbar-button__trigger) {
		padding-right: 14px;
	}
}

@media (max-width: 560px) {
	.webon-jodit-editor .jodit-toolbar-button__icon .jodit-icon,
	.webon-jodit-editor .jodit-toolbar-button__icon svg {
		width: 12px;
		height: 12px;
	}
	/* 모바일: 긴 라벨 → 축약 라벨(data-short)로 표시 */
	.webon-jodit-editor .jodit-toolbar-button::after {
		content: attr(data-short);
		font-size: 10px;
	}
	.webon-jodit-editor .jodit-toolbar-button {
		padding: 2px 4px;
		gap: 1px;
	}
	.webon-jodit-editor .jodit-toolbar-button__button {
		height: 24px;
		min-height: 24px;
	}
}

@media (max-width: 400px) {
	.webon-jodit-editor .jodit-toolbar-button::after {
		font-size: 9px;
	}
	.webon-jodit-editor .jodit-toolbar-button {
		padding: 1px 3px;
	}
}
/* 13) 팝업(테이블 셀 조작 등) 아이콘 버튼: 아이콘 위 + 작은 한글 라벨 아래(직관적)
   (:has(svg) 로 좁혀 텍스트 목록 드롭다운(제목/글꼴 등)은 건드리지 않음) */
.jodit-popup-container
	.jodit-toolbar-button:has(.jodit-toolbar-button__icon svg) {
	position: relative;
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	width: 60px !important; /* 균일 셀 → 격자처럼 가지런 */
	padding: 8px 4px 6px !important;
	margin: 1px !important;
	border: 1px solid transparent !important; /* 평소 테두리 없음(깔끔) */
	border-radius: 8px !important;
	background: transparent !important;
	height: auto !important;
	min-height: 0 !important;
	overflow: visible !important;
	cursor: pointer !important; /* 마우스 오버 시 클릭 커서 */
}

/* 서브메뉴 화살표: 우상단 모서리에 은은하게 (hover 시 진해짐) */
.jodit-popup-container
	.jodit-toolbar-button:has(.jodit-toolbar-button__icon svg)
	.jodit-toolbar-button__trigger {
	position: absolute !important;
	top: 2px;
	right: 2px;
	width: 10px !important;
	min-width: 10px !important;
	height: 11px !important;
	opacity: 0.4;
}
.jodit-popup-container
	.jodit-toolbar-button:has(.jodit-toolbar-button__icon svg):hover
	.jodit-toolbar-button__trigger {
	opacity: 0.75;
}

/* ⭐ 아이콘 아래 작은 한글 라벨 → 무슨 기능인지 쉽게 */
.jodit-popup-container
	.jodit-toolbar-button[aria-label]:has(.jodit-toolbar-button__icon svg)::after {
	content: attr(aria-label);
	margin-top: 5px;
	font-size: 11px;
	font-weight: 500;
	color: #3c4250;
	white-space: nowrap;
	line-height: 1;
}

/* '배경' 라벨 → '색상' 으로 표기 변경 */
.jodit-popup-container
	.jodit-toolbar-button[aria-label='배경']:has(.jodit-toolbar-button__icon svg)::after {
	content: '색상' !important;
}

.jodit-popup-container
	.jodit-toolbar-button:has(.jodit-toolbar-button__icon svg)
	.jodit-toolbar-button__button {
	padding: 0 1px !important;
	min-height: 0 !important;
	height: auto !important;
}

/* 내부 버튼/화살표 배경 투명 → hover 강조는 wrapper 통째로(아이콘부만 달라 보이는 문제 해결) */
.jodit-popup-container
	.jodit-toolbar-button:has(.jodit-toolbar-button__icon svg)
	.jodit-toolbar-button__button,
.jodit-popup-container
	.jodit-toolbar-button:has(.jodit-toolbar-button__icon svg)
	.jodit-toolbar-button__button:hover,
.jodit-popup-container
	.jodit-toolbar-button:has(.jodit-toolbar-button__icon svg)
	.jodit-toolbar-button__trigger,
.jodit-popup-container
	.jodit-toolbar-button:has(.jodit-toolbar-button__icon svg)
	.jodit-toolbar-button__trigger:hover {
	background: transparent !important;
}

.jodit-popup-container
	.jodit-toolbar-button:has(.jodit-toolbar-button__icon svg)
	.jodit-icon,
.jodit-popup-container
	.jodit-toolbar-button:has(.jodit-toolbar-button__icon svg)
	.jodit-toolbar-button__icon svg {
	width: 17px !important;
	height: 17px !important;
}

/* hover: 에디터 버튼과 동일한 색 (테두리 없이 배경만) */
.jodit-popup-container
	.jodit-toolbar-button:has(.jodit-toolbar-button__icon svg):hover {
	background: var(--jd-color-button-background-hover-opacity40) !important;
	border-color: transparent !important;
}

/* 팝업 자체: 둥근 카드 + 부드러운 그림자 + 약간의 여백 */
.jodit-popup-container .jodit-popup,
.jodit-popup-container .jodit-popup__content {
	border-radius: 10px !important;
}
.jodit-popup-container .jodit-popup {
	box-shadow: 0 6px 24px rgba(16, 24, 40, 0.14) !important;
	border: 1px solid #e6e9ef !important;
}
.jodit-popup-container .jodit-popup__content {
	padding: 4px !important;
}

/* 팝업 내부 줄 구분선(가로선) 제거 — 메인 툴바와 동일 처리 */
.jodit-popup-container .jodit-toolbar-editor-collection::after,
.jodit-popup-container .jodit-toolbar-editor-collection::before,
.jodit-popup-container .jodit-ui-group::after,
.jodit-popup-container .jodit-ui-group::before,
.jodit-popup-container .jodit-toolbar__item::after,
.jodit-popup-container .jodit-toolbar__item::before {
	display: none !important;
}

.jodit-popup-container .jodit-toolbar-editor-collection,
.jodit-popup-container .jodit-ui-group,
.jodit-popup-container .jodit-toolbar__item {
	border-color: transparent !important;
	box-shadow: none !important;
	background-image: none !important;
}

/* 14) ⭐ 폰트 관련 버튼: 텍스트 라벨 숨기고 아이콘만(+호버 툴팁)으로 컴팩트 배치
   (굵게/기울임/밑줄/취소선/글꼴/글꼴크기/글꼴색상/바탕색상) */
.webon-jodit-editor .jodit-toolbar-button[data-ref='bold'],
.webon-jodit-editor .jodit-toolbar-button[data-ref='italic'],
.webon-jodit-editor .jodit-toolbar-button[data-ref='underline'],
.webon-jodit-editor .jodit-toolbar-button[data-ref='strikethrough'],
.webon-jodit-editor .jodit-toolbar-button[data-ref='font'],
.webon-jodit-editor .jodit-toolbar-button[data-ref='fontsize'],
.webon-jodit-editor .jodit-toolbar-button[data-ref='fontColor'],
.webon-jodit-editor .jodit-toolbar-button[data-ref='bgColor'] {
	flex: 0 0 auto !important; /* 늘어나지 않고 아이콘 폭으로 컴팩트 */
}

.webon-jodit-editor .jodit-toolbar-button[data-ref='bold']::after,
.webon-jodit-editor .jodit-toolbar-button[data-ref='italic']::after,
.webon-jodit-editor .jodit-toolbar-button[data-ref='underline']::after,
.webon-jodit-editor .jodit-toolbar-button[data-ref='strikethrough']::after,
.webon-jodit-editor .jodit-toolbar-button[data-ref='font']::after,
.webon-jodit-editor .jodit-toolbar-button[data-ref='fontsize']::after,
.webon-jodit-editor .jodit-toolbar-button[data-ref='fontColor']::after,
.webon-jodit-editor .jodit-toolbar-button[data-ref='bgColor']::after {
	display: none !important; /* 텍스트 라벨 숨김 → 호버 툴팁만 */
}

/* 폰트 서식 아이콘 가독성 위해 약간 키움 */
.webon-jodit-editor .jodit-toolbar-button[data-ref='bold'] .jodit-icon,
.webon-jodit-editor .jodit-toolbar-button[data-ref='italic'] .jodit-icon,
.webon-jodit-editor .jodit-toolbar-button[data-ref='underline'] .jodit-icon,
.webon-jodit-editor .jodit-toolbar-button[data-ref='strikethrough'] .jodit-icon,
.webon-jodit-editor .jodit-toolbar-button[data-ref='fontColor'] .jodit-icon,
.webon-jodit-editor .jodit-toolbar-button[data-ref='bgColor'] .jodit-icon,
.webon-jodit-editor .jodit-toolbar-button[data-ref='font'] .jodit-icon {
	width: 15px !important;
	height: 15px !important;
}

/* 15) ⭐ 폰트 관련 버튼을 하나의 연결된 그룹(세그먼트)으로 묶기 */
.webon-jodit-editor .jodit-toolbar-button[data-ref='bold'],
.webon-jodit-editor .jodit-toolbar-button[data-ref='italic'],
.webon-jodit-editor .jodit-toolbar-button[data-ref='underline'],
.webon-jodit-editor .jodit-toolbar-button[data-ref='strikethrough'],
.webon-jodit-editor .jodit-toolbar-button[data-ref='font'],
.webon-jodit-editor .jodit-toolbar-button[data-ref='fontsize'],
.webon-jodit-editor .jodit-toolbar-button[data-ref='fontColor'],
.webon-jodit-editor .jodit-toolbar-button[data-ref='bgColor'] {
	margin: 2px 0 !important; /* 좌우 마진 0 → 버튼끼리 붙임 */
	border-radius: 0 !important;
	border-right-width: 0 !important; /* 인접 테두리 공유(이중선 방지) */
	box-shadow: none !important;
}

/* 그룹 첫 버튼(굵게): 왼쪽 둥글게 + 좌측 마진 */
.webon-jodit-editor .jodit-toolbar-button[data-ref='bold'] {
	border-radius: 8px 0 0 8px !important;
	margin-left: 1px !important;
}

/* 그룹 끝 버튼(바탕색상): 오른쪽 둥글게 + 우측 테두리/마진 복원 */
.webon-jodit-editor .jodit-toolbar-button[data-ref='bgColor'] {
	border-radius: 0 8px 8px 0 !important;
	border-right-width: 1px !important;
	margin-right: 5px !important;
}

/* 그룹 hover: 테두리/그림자 변화 억제(묶음 유지), 배경만 강조 */
.webon-jodit-editor .jodit-toolbar-button[data-ref='bold']:hover,
.webon-jodit-editor .jodit-toolbar-button[data-ref='italic']:hover,
.webon-jodit-editor .jodit-toolbar-button[data-ref='underline']:hover,
.webon-jodit-editor .jodit-toolbar-button[data-ref='strikethrough']:hover,
.webon-jodit-editor .jodit-toolbar-button[data-ref='font']:hover,
.webon-jodit-editor .jodit-toolbar-button[data-ref='fontsize']:hover,
.webon-jodit-editor .jodit-toolbar-button[data-ref='fontColor']:hover,
.webon-jodit-editor .jodit-toolbar-button[data-ref='bgColor']:hover {
	border-color: #e7ebf2 !important;
	box-shadow: none !important;
}

/* 16) 보조 버튼: 라벨 제거 → 아이콘 + 호버 툴팁
   (실행취소/재실행/편집모드변경(소스)/전체화면/미리보기) */
.webon-jodit-editor .jodit-toolbar-button[data-ref='undo']::after,
.webon-jodit-editor .jodit-toolbar-button[data-ref='redo']::after,
.webon-jodit-editor .jodit-toolbar-button[data-ref='source']::after,
.webon-jodit-editor .jodit-toolbar-button[data-ref='fullsize']::after,
.webon-jodit-editor .jodit-toolbar-button[data-ref='preview']::after {
	display: none !important;
}

/* 18) 정렬 버튼: 라벨 제거(아이콘만) + 연결된 세그먼트 그룹 (글꼴 클러스터 뒤) */
.webon-jodit-editor .jodit-toolbar-button[data-ref='alignLeft'],
.webon-jodit-editor .jodit-toolbar-button[data-ref='alignCenter'],
.webon-jodit-editor .jodit-toolbar-button[data-ref='alignRight'],
.webon-jodit-editor .jodit-toolbar-button[data-ref='alignJustify'] {
	flex: 0 0 auto !important;
	margin: 2px 0 !important;
	border-radius: 0 !important;
	border-right-width: 0 !important;
	box-shadow: none !important;
}
.webon-jodit-editor .jodit-toolbar-button[data-ref='alignLeft']::after,
.webon-jodit-editor .jodit-toolbar-button[data-ref='alignCenter']::after,
.webon-jodit-editor .jodit-toolbar-button[data-ref='alignRight']::after,
.webon-jodit-editor .jodit-toolbar-button[data-ref='alignJustify']::after {
	display: none !important;
}
.webon-jodit-editor .jodit-toolbar-button[data-ref='alignLeft'] {
	border-radius: 8px 0 0 8px !important;
	margin-left: 1px !important;
}
.webon-jodit-editor .jodit-toolbar-button[data-ref='alignJustify'] {
	border-radius: 0 8px 8px 0 !important;
	border-right-width: 1px !important;
	margin-right: 5px !important;
}
.webon-jodit-editor .jodit-toolbar-button[data-ref='alignLeft']:hover,
.webon-jodit-editor .jodit-toolbar-button[data-ref='alignCenter']:hover,
.webon-jodit-editor .jodit-toolbar-button[data-ref='alignRight']:hover,
.webon-jodit-editor .jodit-toolbar-button[data-ref='alignJustify']:hover {
	border-color: #d8dbe0 !important;
	box-shadow: none !important;
}

/* 19) 글꼴 버튼: 폰트값 텍스트 박스(세그먼트와 분리된 맨 앞 단독 둥근 박스) */
.webon-jodit-editor .jodit-toolbar-button[data-ref='font'] {
	flex: 0 0 auto !important;
	justify-content: flex-start !important;
	margin: 2px 5px 2px 1px !important;
	border-radius: 8px !important;
	border-right-width: 1px !important;
	min-width: 84px !important;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06) !important;
}
.webon-jodit-editor .jodit-toolbar-button[data-ref='font'] .cm-font-name {
	font-size: 12.5px;
	font-weight: 500;
	color: #3c4043;
	white-space: nowrap;
	padding-left: 3px;
}

/* 17) 본문(에디터 내용): 엔터(문단) 간격을 줄바꿈(줄간격)과 동일하게
   - 각 Enter 가 만드는 <p> 의 기본 위/아래 여백을 제거 → 엔터 간격 = 줄간격
   - 줄간격은 line-height 로 통일 */
.webon-jodit-editor .jodit-wysiwyg {
	line-height: 1.6;
}
.webon-jodit-editor .jodit-wysiwyg p {
	margin: 0 !important;
}

/* ── 보안 업로드(파일 선택) 팝업 — webon 유지 ── */
/* Jodit inserts the image selector next to <body>, outside the editor wrapper. */
.jodit-popup:has(.jodit-file-selector) {
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #d6dde8;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15, 39, 72, .16);
}

.jodit-popup:has(.jodit-file-selector) .jodit-popup__content {
    overflow: hidden;
    border: 0;
    border-radius: inherit;
    background: transparent;
    box-shadow: none;
}

.jodit-popup .jodit-file-selector {
    width: min(400px, calc(100vw - 24px));
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #172033;
    font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
}

.jodit-popup .jodit-file-selector .jodit-tabs__buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    border-bottom: 1px solid #e4e9f1;
    background: #f5f7fb;
}

.jodit-popup .jodit-file-selector .jodit-tabs__button {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #526174;
    font-weight: 700;
}

.jodit-popup .jodit-file-selector .jodit-tabs__button .jodit-ui-button__icon,
.jodit-popup .jodit-file-selector .jodit-tabs__button .jodit-ui-button__text {
    flex: 0 1 auto;
    margin: 0;
}

.jodit-popup .jodit-file-selector .jodit-tabs__button .jodit-ui-button__icon {
    flex-shrink: 0;
}

.jodit-popup .jodit-file-selector .jodit-tabs__button:hover {
    border-color: #c7d4e5;
    background: #fff;
    color: #173b6c;
}

.jodit-popup .jodit-file-selector .jodit-tabs__button[aria-pressed="true"] {
    border-color: #173b6c;
    background: #173b6c;
    color: #fff;
}

.jodit-popup .jodit-file-selector .jodit-tabs__button[aria-pressed="true"] svg {
    fill: currentColor;
}

.jodit-popup .jodit-file-selector .jodit-tabs__wrapper {
    padding: 16px;
    background: #fff;
}

.jodit-popup .jodit-file-selector .jodit-tab,
.jodit-popup .jodit-file-selector .jodit-ui-form,
.jodit-popup .jodit-file-selector .jodit-ui-input,
.jodit-popup .jodit-file-selector .jodit-ui-input__wrapper {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.jodit-popup .jodit-file-selector .jodit-ui-input,
.jodit-popup .jodit-file-selector .jodit-ui-input__wrapper {
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
}

.jodit-popup .jodit-file-selector .jodit-drag-and-drop__file-box {
    display: flex;
    width: 100%;
    min-height: 160px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 24px;
    border: 1px dashed #aebdd1;
    border-radius: 10px;
    background: #f8fafc;
    color: #173b6c;
    text-align: center;
    line-height: 1.5;
    cursor: pointer;
}

.jodit-popup .jodit-file-selector .jodit-drag-and-drop__file-box:hover {
    border-color: #2b68c5;
    background: #f0f5fd;
}

.jodit-popup .jodit-file-selector .jodit-ui-form {
    display: grid;
    gap: 14px;
}

.jodit-popup .jodit-file-selector .jodit-ui-input__label {
    display: block;
    margin-bottom: 6px;
    color: #526174;
    font-size: 13px;
    font-weight: 700;
}

.jodit-popup .jodit-file-selector .jodit-ui-input__input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid #cfd8e6;
    border-radius: 8px;
    background: #fff;
    color: #172033;
    font: inherit;
}

.jodit-popup .jodit-file-selector .jodit-ui-input__input:focus {
    border-color: #2b68c5;
    outline: 3px solid rgba(43, 104, 197, .16);
    outline-offset: 0;
}

.jodit-popup .jodit-file-selector button[type="submit"] {
    min-width: 96px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: #173b6c;
    color: #fff;
    font-weight: 800;
}

.jodit-popup .jodit-file-selector button[type="submit"]:hover {
    background: #0f2d52;
}

.jodit-popup .jodit-file-selector button:focus-visible,
.jodit-popup .jodit-file-selector input:focus-visible {
    outline: 3px solid rgba(43, 104, 197, .24);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .jodit-popup:has(.jodit-file-selector) {
        position: absolute !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
    }

    .jodit-popup:has(.jodit-file-selector) .jodit-popup__content {
        max-height: none !important;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .jodit-popup .jodit-file-selector {
        width: 100%;
    }

    .jodit-popup .jodit-file-selector .jodit-tabs__wrapper {
        padding: 12px;
    }
}