@charset "utf-8";
/**
 * Zittme 사이트 메뉴 편집기 — 전면 리디자인 (마크업/JS 계약 100% 유지)
 *  - 가로 풀페이지 멀티 패널
 *  - zittme-admin.css 디자인 토큰(--zm-*) 사용 → 다크모드 자동 지원
 *  - 레거시 아이콘 SVG 마스크 교체
 *  - 하단 "기능 상태 규칙" 섹션은 JS 동작에 필수 — 삭제 금지
 */

/* ═══════ 풀페이지 레이아웃 ═══════ */
.x .content:has(#site) { max-width: none; }
#site {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	margin-top: 8px;
	padding: 4px 2px 14px;
	word-wrap: normal;
	min-height: 72vh;
}

/* ═══════ 패널 카드 ═══════ */
.col {
	display: inline-flex;
	flex-direction: column;
	vertical-align: top;
	position: relative;
	overflow: hidden;
	background: var(--zm-surface, #fff);
	white-space: normal;
	height: 72vh;
	min-height: 72vh;
	width: 340px;
	margin: 0 12px 0 0;
	border: 1px solid var(--zm-line, #e5e9f0);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(61,68,81,.05), 0 10px 28px -18px rgba(61,68,81,.18);
	font-size: 13.5px;
}
.col.map { width: 360px; }
/* 패널 내부를 세로 flex로 — 스크롤 영역(.cnt)이 정확히 바닥까지 */
.col > section, .col > fieldset, .col > form ~ div, .col > div:not(.btnBoth) {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}
.col>h1, .col>*>h1 {
	margin: 0;
	padding: 14px 40px 14px 18px;
	border-bottom: 1px solid var(--zm-line, #e5e9f0);
	box-sizing: border-box;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--zm-ink, #3d4451);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.col>*>h1>a { color: var(--zm-ink, #3d4451); text-decoration: none; }
.col>*>h1>a:hover, .col>*>h1>a:focus { color: var(--zm-brand, #2677e3); }
.col .cnt {
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
	padding: 14px 18px;
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
}
/* 확인/저장 버튼바가 있는 .cnt 는 마지막 콘텐츠가 바에 가리지 않게 하단 여백 확보 */
.col .cnt:has(> .x_btn-group), .col .cnt:has(> .btnBoth) { padding-bottom: 14px; }

/* ── 스크롤바 전용 디자인 ── */
#site *, #site { scrollbar-width: thin; scrollbar-color: var(--zm-input-border, #d4dae3) transparent; }
#site ::-webkit-scrollbar { width: 8px; height: 8px; }
#site ::-webkit-scrollbar-track { background: transparent; }
#site ::-webkit-scrollbar-thumb {
	background: var(--zm-input-border, #d4dae3);
	border-radius: 999px;
}
#site ::-webkit-scrollbar-thumb:hover { background: var(--zm-ink-faint, #9aa2af); }
#site ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.col input[type=checkbox], .col input[type=radio] { margin: 0; accent-color: var(--zm-brand, #2677e3); }

/* 패널 닫기(X) — SVG */
.col>.x_close {
	position: absolute;
	top: 12px; right: 12px;
	width: 26px; height: 26px;
	border: 0; cursor: pointer;
	font-size: 0;
	border-radius: 6px;
	background-color: var(--zm-ink-faint, #9aa2af);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
	opacity: 1;
}
.col>.x_close:hover, .col>.x_close:focus { background-color: var(--zm-error, #e5484d); }

/* ═══════ 검색 폼 ═══════ */
.col #menu_find {
	display: flex;
	gap: 6px;
	height: auto;
	margin: 0;
	padding: 12px 18px;
	border-bottom: 1px solid var(--zm-line, #e5e9f0);
}
.col #menu_find input[type=text] {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 7px 11px;
	border: 1px solid var(--zm-input-border, #d4dae3);
	border-radius: 8px;
	background: var(--zm-surface, #fff);
	color: var(--zm-ink, #3d4451);
	font-size: 13px;
	box-sizing: border-box;
}
.col #menu_find input[type=text]:focus {
	outline: none;
	border-color: var(--zm-brand, #2677e3);
	box-shadow: 0 0 0 3px rgba(38,119,227,.14);
}
.col #menu_find .x_btn {
	flex: 0 0 auto;
	padding: 7px 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--zm-ink, #3d4451);
	background: var(--zm-surface-2, #fafcfe);
	border: 1px solid var(--zm-input-border, #d4dae3);
	border-radius: 8px;
	cursor: pointer;
}
.col #menu_find .x_btn:hover { color: var(--zm-brand, #2677e3); border-color: var(--zm-brand, #2677e3); }

/* ═══════ 트리 (jstree) ═══════ */
#siteMapTree, .mapi { margin: 3px 0 5px; min-width: 200px; background: transparent; }
.mapi ul { margin: 0; padding: 0 0 0 18px; list-style: none; }
.mapi > ul, #siteMapTree > ul { padding-left: 0; }
.mapi li { padding: 0; white-space: nowrap; position: relative; border-radius: 7px; vertical-align: top; list-style: none; }
.mapi li > a {
	display: inline-flex;      /* 아이콘+텍스트 세로 중앙 정렬 */
	align-items: center;
	padding: 5px 9px;
	margin: 1px 0;
	border-radius: 7px;
	color: var(--zm-ink, #3d4451);
	text-decoration: none;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	height: auto !important;
	vertical-align: middle;
}

/* ── 트리 연결선 (자식 항목) — 마지막 항목까지 정확히 닿게 ── */
.mapi ul ul > li::before {   /* 세로선 */
	content: "";
	position: absolute;
	left: -9px; top: 0; bottom: 0;
	border-left: 1px solid var(--zm-line, #e5e9f0);
}
.mapi ul ul > li:last-child::before { bottom: auto; height: 16px; } /* 마지막은 커넥터까지만 */
.mapi ul ul > li::after {    /* 가로선 */
	content: "";
	position: absolute;
	left: -9px; top: 16px;
	width: 9px;
	border-top: 1px solid var(--zm-line, #e5e9f0);
}
.mapi li > a:hover, .mapi .jstree-hovered {
	background: var(--zm-brand-soft, #e8f1fd) !important;
	color: var(--zm-brand-dark, #1b5fc0) !important;
}
.mapi .jstree-clicked {
	background: var(--zm-brand, #2677e3) !important;
	color: #fff !important;
	box-shadow: none !important;
}
.mapi .jstree-clicked em, .mapi .jstree-clicked i { color: #fff !important; }
.mapi em { font-style: normal; font-size: 11px; opacity: .75; margin-left: 3px; }
#siteMapTree > ul > li { margin-bottom: 10px; }
#siteMapTree > ul > li > a { font-weight: 700; }

/* 노드 토글 아이콘: 스프라이트 → SVG 폴더 (li 직속 ins만; a 내부 노드아이콘은 숨김 유지) */
.mapi li > ins.jstree-icon {
	display: inline-block;
	flex: 0 0 auto;
	width: 17px; height: 17px;
	margin: 1px 5px 0 0;
	vertical-align: middle;
	background: none !important;
	background-color: var(--zm-ink-soft, #6b7280) !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
	cursor: pointer;
}
/* 열린 폴더 */
.mapi li.jstree-open > ins.jstree-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v1H7l-3 8'/%3E%3Cpath d='M3 7v11a1 1 0 0 0 1 1h13a2 2 0 0 0 1.9-1.37L21 11H7l-2.5 7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v1H7l-3 8'/%3E%3Cpath d='M3 7v11a1 1 0 0 0 1 1h13a2 2 0 0 0 1.9-1.37L21 11H7l-2.5 7'/%3E%3C/svg%3E");
}
/* 리프(자식 없음): 아이콘 숨기고 자리만 최소화 */
.mapi li.jstree-leaf > ins.jstree-icon {
	background-color: transparent !important;
	-webkit-mask: none; mask: none;
	width: 6px;
}
.col.map .x_btn-group { border-top: 1px solid var(--zm-line, #e5e9f0); padding: 10px 0; }

/* 사이트맵 추가 버튼 */
._addSiteMap1 {
	position: absolute !important;
	right: 12px !important; bottom: 12px !important;
	color: var(--zm-brand, #2677e3) !important;
	font-size: 13px !important;
	font-weight: 600;
	background: var(--zm-brand-soft, #e8f1fd) !important;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 8px 14px !important;
	cursor: pointer;
}
._addSiteMap1:hover { background: var(--zm-brand, #2677e3) !important; color: #fff !important; text-decoration: none !important; }

/* ═══════ SVG 아이콘 ═══════ */
#site i.x_icon-circle-arrow-right, #site i.x_icon-cog {
	margin-left: auto;
	flex: 0 0 auto;
	width: 15px; height: 15px;
	font-size: 0;
	background-color: currentColor;
	opacity: .55;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: contain; mask-size: contain;
}
#site i.x_icon-circle-arrow-right::before, #site i.x_icon-cog::before { content: none !important; }
#site i.x_icon-circle-arrow-right {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 5 16 12 9 19'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 5 16 12 9 19'/%3E%3C/svg%3E");
}
#site i.x_icon-cog {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
}
#site a:hover > i.x_icon-circle-arrow-right, #site a:hover > i.x_icon-cog { opacity: 1; }

/* 도움말(?) — 텍스트 숨기고 SVG만 */
#site a.x_icon-question-sign {
	display: inline-block;
	vertical-align: middle;
	width: 15px; height: 15px;
	margin-left: 4px;
	font-size: 0;
	background-color: var(--zm-ink-faint, #9aa2af);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 1 1 3.9 2.07c-.9.6-1.4 1.13-1.4 2.18'/%3E%3Cline x1='12' y1='16.5' x2='12' y2='16.6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 1 1 3.9 2.07c-.9.6-1.4 1.13-1.4 2.18'/%3E%3Cline x1='12' y1='16.5' x2='12' y2='16.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
#site a.x_icon-question-sign::before { content: none !important; }
#site a.x_icon-question-sign:hover { background-color: var(--zm-brand, #2677e3); }

/* 추가(+) */
#site i.x_icon-plus-sign {
	display: inline-block;
	width: 13px; height: 13px;
	font-size: 0;
	vertical-align: -1px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
}
#site i.x_icon-plus-sign::before { content: none !important; }

/* ═══════ 속성(컨텍스트) 패널 ═══════ */
#properties .cnt > ul > li, #propertiesRoot .cnt > ul > li {
	list-style: none;
	border-bottom: 1px solid var(--zm-line-soft, #f0f3f8);
}
#properties .cnt > ul > li.type {
	padding: 6px 4px 12px;
	color: var(--zm-ink-soft, #6b7280);
	font-size: 12.5px;
	border-bottom: 1px solid var(--zm-line, #e5e9f0);
}
#properties .cnt > ul > li > a,
#properties .cnt > ul > li > button,
#propertiesRoot .cnt > ul > li > a,
#propertiesRoot .cnt > ul > li > button {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 8px;
	padding: 8px;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	font-size: 13.5px;
	color: var(--zm-ink, #3d4451);
	border-radius: 8px;
	box-sizing: border-box;
	text-decoration: none;
}
#properties .cnt > ul > li > a:hover,
#properties .cnt > ul > li > button:hover:not([disabled]),
#propertiesRoot .cnt > ul > li > a:hover,
#propertiesRoot .cnt > ul > li > button:hover:not([disabled]) {
	background: var(--zm-brand-soft, #e8f1fd);
	color: var(--zm-brand-dark, #1b5fc0);
}
#properties .cnt > ul > li > button[disabled] { opacity: .4; cursor: not-allowed; }

/* ═══════ 폼 패널 ═══════ */
#site fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.col .cnt > ul, .col .cnt ul._itemList { margin: 0; padding: 0; list-style: none; }
.col .cnt > ul > li, .col .cnt ul._itemList > li { list-style: none; margin: 0 0 14px; }
.col .cnt label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--zm-ink, #3d4451);
}
.col .cnt label:only-child { cursor: pointer; }
.col .cnt input[type=text], .col .cnt textarea, .col .cnt select {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 11px;
	border: 1px solid var(--zm-input-border, #d4dae3);
	border-radius: 8px;
	background: var(--zm-surface, #fff);
	color: var(--zm-ink, #3d4451);
	font-size: 13px;
}
.col .cnt input[type=text]:focus, .col .cnt textarea:focus, .col .cnt select:focus {
	outline: none;
	border-color: var(--zm-brand, #2677e3);
	box-shadow: 0 0 0 3px rgba(38,119,227,.14);
}
.col .cnt textarea { min-height: 64px; resize: vertical; }
.col .cnt p.desc { font-size: 12.5px; color: var(--zm-ink-soft, #6b7280); margin: 0 0 12px; }
.col .cnt label:has(> input[type=checkbox]), .col .cnt label:has(> input[type=radio]) {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
}

/* 도움말 알림 박스 (토글) */
.col .x_alert { margin: 0 0 10px; border-radius: 8px; font-size: 12.5px; position: relative; padding: 10px 32px 10px 12px; }
.col .x_alert .x_close {
	position: absolute; top: 6px; right: 6px;
	width: 20px; height: 20px;
	border: 0; background: none; cursor: pointer;
	color: var(--zm-ink-faint, #9aa2af); font-size: 15px; line-height: 1;
}

/* 다국어 버튼 (JS 주입) — 세로 글자 깨짐 방지 */
#site .multilingual.x_input-append { display: block; position: relative; }

/* 인라인 다국어 위젯(.g11n) 스타일은 zittme-admin.css 전역 규칙 사용 (해제 버튼은 active일 때만 표시). 텍스트영역 높이만 보정 */
#site .g11n > textarea.lang_code { min-height: 64px; }

/* ═══════ 메뉴 추가: 타입 선택 목록 (ul.nav) ═══════ */
#site .cnt ul.nav { margin: 0; padding: 0; list-style: none; }
#site .cnt ul.nav > li { list-style: none; margin: 0; border-bottom: 1px solid var(--zm-line-soft, #f0f3f8); }
#site .cnt ul.nav > li > a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 8px;
	border-radius: 8px;
	color: var(--zm-ink, #3d4451);
	font-size: 13.5px;
	text-decoration: none;
}
#site .cnt ul.nav > li > a:hover {
	background: var(--zm-brand-soft, #e8f1fd);
	color: var(--zm-brand-dark, #1b5fc0);
}
#site .cnt ul.nav > li.active > a, #site .cnt ul.nav > li.x_active > a { color: var(--zm-brand, #2677e3); font-weight: 700; }
/* "다른 메뉴타입 설치" / "다른 레이아웃 설치" 링크 */
#site a.x_btn-link {
	position: absolute !important;
	right: 12px !important; bottom: 12px !important;
	display: inline-flex; align-items: center; gap: 5px;
	color: var(--zm-brand, #2677e3) !important;
	font-size: 13px; font-weight: 600;
	background: var(--zm-brand-soft, #e8f1fd) !important;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 8px 14px !important;
	text-decoration: none;
}
#site a.x_btn-link:hover { background: var(--zm-brand, #2677e3) !important; color: #fff !important; }
#site a.x_btn-link:hover i.x_icon-plus-sign { background-color: #fff; }

/* 탭 */
#site .x_nav-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--zm-line, #e5e9f0); margin: 0 0 10px; padding: 0; list-style: none; }
#site .x_nav-tabs > li { list-style: none; margin-bottom: -1px; }
#site .x_nav-tabs > li > a {
	display: block;
	padding: 7px 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--zm-ink-soft, #6b7280);
	border-bottom: 2px solid transparent;
	text-decoration: none;
}
#site .x_nav-tabs > li.x_active > a { color: var(--zm-brand, #2677e3); border-bottom-color: var(--zm-brand, #2677e3); }

/* (구) 하단 고정 버튼바 규칙 제거 — 확인/저장 버튼은 아래 규칙대로 콘텐츠 안 일반 블록 */
#site .btnBoth::after { content: none; }

/* ═══════ 확인/저장 버튼바 — 콘텐츠(.cnt) 안 일반 블록 (원본 구조 유지) ═══════
   position 없이 콘텐츠 끝에 자연스럽게 붙어 함께 스크롤된다 */
#site .cnt .x_btn-group,
#site .cnt .btnBoth,
#site .col .x_btn-group,
#site .col .btnBoth {
	position: static;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin: 16px -18px -14px;      /* 좌우/하단 .cnt 패딩 상쇄 → 풀폭 하단 바 */
	padding: 14px 18px;
	background: var(--zm-surface-2, #fafcfe);
	border-top: 1px solid var(--zm-line, #e5e9f0);
	box-sizing: border-box;
}
#site .cnt .btnBoth, #site .col .btnBoth { justify-content: space-between; }
#site .cnt .btnBoth .x_pull-left, #site .col .btnBoth .x_pull-left { float: none; margin-right: auto; }
#site .cnt .btnBoth .x_pull-right, #site .col .btnBoth .x_pull-right { float: none; }
#site .cnt .x_btn-group > .x_btn, #site .cnt .btnBoth > .x_btn { border-radius: 8px !important; margin: 0; }

/* ═══════ 메뉴 링크 이미지 (#imgbtn) — 폼별 컴팩트 카드 ═══════ */
#imgbtn .cnt { padding-bottom: 20px; }
#imgbtn form {
	margin: 0 0 16px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--zm-line-soft, #f0f3f8);
}
#imgbtn form:last-of-type { border-bottom: 0; }
#imgbtn figure { margin: 0 0 8px; }
#imgbtn figcaption { font-size: 13px; font-weight: 600; color: var(--zm-ink, #3d4451); margin: 0 0 6px; }
#imgbtn figure .noImg {
	display: flex; align-items: center; justify-content: center;
	min-height: 70px;
	background: var(--zm-surface-3, #fafbfd);
	border: 1px dashed var(--zm-line, #e5e9f0);
	border-radius: 8px;
	color: var(--zm-ink-faint, #9aa2af);
	font-size: 12px;
	margin: 0;
}
#imgbtn figure ._thumbnail { display: block; max-width: 100%; border-radius: 8px; margin: 0; }
#imgbtn figure ._thumbnail[src$="blank.gif"] { display: none; }  /* 빈 이미지 숨김 */
/* 폼별 버튼줄: 정적 배치 (고정바 아님) */
#imgbtn .btnBoth {
	position: static !important;
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	padding: 0;
	margin: 6px 0 0;
	background: none;
	border: 0;
}
#imgbtn .btnBoth .x_pull-left { float: none; margin-right: auto; }
#imgbtn .btnBoth .x_pull-right { float: none; }
/* 파일 선택 버튼 = "이미지 올리기" (input file 숨기고 라벨 텍스트만) */
#imgbtn .fileBtn {
	position: relative;
	overflow: hidden;
	display: inline-flex; align-items: center;
	padding: 7px 14px;
	border: 1px solid var(--zm-input-border, #d4dae3);
	border-radius: 8px;
	background: var(--zm-surface-2, #fafcfe);
	color: var(--zm-ink, #3d4451);
	font-size: 12.5px;
	cursor: pointer;
	white-space: nowrap;
}
#imgbtn .fileBtn:hover { border-color: var(--zm-brand, #2677e3); color: var(--zm-brand, #2677e3); }
#imgbtn .fileBtn input[type=file] {
	position: absolute; inset: 0;
	opacity: 0; cursor: pointer;
	font-size: 0; width: 100%; height: 100%;
}
#imgbtn .delete.x_btn { padding: 7px 14px; white-space: nowrap; }
/* 삭제 버튼: 이미지가 올려진 상태(form._imgUploaded)에서만 표시 */
#imgbtn form .delete.x_btn { display: none; }
#imgbtn form._imgUploaded .delete.x_btn { display: inline-flex; }
/* 이미지 있으면 "이미지 없음"은 숨김 (JS가 _thumbnail src 교체) */
#imgbtn form._imgUploaded .noImg { display: none; }


/* 스킨/레이아웃 목록 */
#site .list { margin: 0; padding: 0; list-style: none; }
#site .list > li { list-style: none; margin-bottom: 10px; position: relative; }
#site ._thumbnail { border-radius: 8px; overflow: hidden; border: 1px solid var(--zm-line, #e5e9f0); }
#site ._thumbnail img { display: block; max-width: 100%; }
#site .noImg {
	display: flex; align-items: center; justify-content: center;
	min-height: 90px;
	background: var(--zm-surface-3, #fafbfd);
	color: var(--zm-ink-faint, #9aa2af);
	font-size: 12px;
	border-radius: 8px;
	border: 1px dashed var(--zm-line, #e5e9f0);
}

/* ═══════ 상세 설정(fullSetup): iframe 게시판 관리 — 풀와이드 패널 ═══════ */
#site #fullSetup, #site #layoutSetup { width: min(1100px, calc(100vw - 60px)); }
#site #fullSetup, #site #layoutSetup .cnt._setupHTML {
	padding: 4px 6px 70px;   /* 하단 고정 확인버튼바에 가리지 않도록 여백 */
	overflow-y: auto;
	max-height: calc(72vh - 54px);
}
#site #fullSetup, #site #layoutSetup .cnt._setupHTML iframe { width: 100%; min-height: calc(72vh - 130px); border: 0; display: block; }
/* 레이아웃 상세설정: ._contents 에 폼이 주입됨 */
#site #layoutSetup .cnt { padding: 8px 16px 16px; }
#site #layoutSetup ._contents { width: 100%; }
/* iframe이 아닌 인라인 폼 로드 케이스: 마지막 요소(고급설정 링크)가 버튼바에 가리지 않도록 */
#site #fullSetup, #site #layoutSetup form { padding: 4px 14px 8px; }
#site #fullSetup, #site #layoutSetup form > p:last-child { margin-bottom: 8px; }

/* ── 상세설정 인라인 폼: x_form-horizontal 레이아웃 복원 ── */
#site #fullSetup, #site #layoutSetup .x_control-group {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--zm-line-soft, #f0f3f8);
	margin: 0;
}
#site #fullSetup, #site #layoutSetup .x_control-label { flex: 0 0 130px; padding-top: 8px; font-weight: 600; font-size: 13px; margin: 0; }
#site #fullSetup, #site #layoutSetup .x_controls { flex: 1 1 auto; min-width: 0; }
/* 나란한 select(정렬방법)는 인라인 자동폭 — #site .cnt select{width:100%} 무력화 */
#site #fullSetup, #site #layoutSetup .x_controls > select,
#site #fullSetup, #site #layoutSetup .x_controls > input[type=number] {
	width: auto !important;
	display: inline-block;
	min-width: 140px;
	max-width: 100%;
	margin: 0 6px 4px 0;
	vertical-align: middle;
}
/* 관리자 ID: select/input + 버튼을 붙이지 않고 분리, 버튼 라운드 복원 */
#site #fullSetup, #site #layoutSetup .x_input-append {
	display: inline-flex;
	align-items: stretch;
	gap: 6px;               /* 버튼을 폼에서 떼기 */
	width: auto;
	max-width: 100%;
}
#site #fullSetup, #site #layoutSetup .x_input-append > input,
#site #fullSetup, #site #layoutSetup .x_input-append > select {
	width: auto !important;
	min-width: 180px;
	border-radius: 8px !important;   /* 좌측 라운드 복원 */
	margin: 0;
}
#site #fullSetup, #site #layoutSetup .x_input-append > .x_btn {
	flex: 0 0 auto;
	white-space: nowrap;
	border: 1px solid var(--zm-input-border, #d4dae3) !important;
	border-radius: 8px !important;   /* 독립 버튼 라운드 */
	background: var(--zm-surface-2, #fafcfe);
	padding: 8px 16px;
}
#site #fullSetup, #site #layoutSetup .x_input-append > .x_btn:hover { background: var(--zm-hover, #f2f5f9); border-color: var(--zm-brand, #2677e3) !important; color: var(--zm-brand, #2677e3); }

/* ═══════ 디자인 패널: 미리보기 iframe + 스킨/레이아웃 선택 ═══════ */
#site #design { width: 380px; }
#site #design .shadow {
	position: relative;
	border: 1px solid var(--zm-line, #e5e9f0);
	border-radius: 10px;
	overflow: hidden;
	background: var(--zm-surface-3, #fafbfd);
	margin: 0 0 10px;
}
#site #design .shadow iframe { width: 100%; height: 190px; border: 0; display: block; }
#site #design .shadow .mask { position: absolute; inset: 0; display: block; }
#site #design ._pc_preview_open, #site #design ._mobile_preview_open, #site #design ._responsive_preview_open {
	position: absolute; right: 8px; bottom: 8px;
	width: 30px; height: 30px;
	font-size: 0; color: transparent;
	border: 0; cursor: pointer;
	border-radius: 7px;
	background-color: rgba(30,37,48,.6);
	/* 확대 아이콘을 SVG 배경으로 그린다. ⤢ 글리프는 폰트에 없어 안 보였다. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M9 21H3v-6'/%3E%3Cpath d='M21 3l-7 7'/%3E%3Cpath d='M3 21l7-7'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center;
	-webkit-mask: none;
}
#site #design ._pc_preview_open::after, #site #design ._mobile_preview_open::after, #site #design ._responsive_preview_open::after {
	content: none;
}
/* 레이아웃/스킨 목록 (라디오 + 썸네일) */
#site #layout .list li, #site #skin .list li { list-style: none; margin: 0 0 12px; }
#site #layout .list label, #site #skin .list label { font-weight: 600; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
#site .layoutSetup, #site #layout, #site #skin { width: 340px; }
#site #layout .list img, #site #skin .list img { width: 100%; border-radius: 8px; border: 1px solid var(--zm-line, #e5e9f0); display: block; }
#site .download .list li { list-style: none; margin: 0 0 12px; }
#site .download ._thumbnail .noImg { min-height: 120px; }

/* ═══════ 기능 상태 규칙 (JS 동작 필수 — 삭제 금지) ═══════ */
.col #menu_find button[type="button"] { visibility: hidden; }
.col.map li._isCut a { color: var(--zm-ink-faint, #9aa2af); }
.mapi a > .jstree-icon, .mapi li > a ins.jstree-icon { display: none !important; }
/* jstree 기본 테마의 스프라이트 점선(d.png repeat-y)을 제거 — 우리 CSS 연결선만 사용 */
.mapi li, .jstree-default li, #siteMapTree li { background: none !important; background-image: none !important; }
.jstree-default > ul > li > ins, .jstree-default .jstree-open > ins, .jstree-default .jstree-closed > ins { background-image: none !important; }
.col .typePage { display: none; }
.col .typeUrl { display: none; }
.col.page .typePage, .col.url .typeUrl { display: block; }
.col .clone li.x_disabled > a { color: var(--zm-ink-faint, #999); text-decoration: none; cursor: not-allowed; }
.download .item.installed ._install { display: none; }
.download .item ._already_installed { display: none; }
.download .item.installed.up_to_date ._need_to_update { display: none; }
.download .item.installed ._already_up_to_date { display: none; }
#properties li.ex { border-top: 0; }
#properties.prop-shortcut li.details { display: none; }
#properties ._hasFullSetupO { display: none; }
#properties._hasFullSetup ._hasFullSetupO { display: block; }
#properties._hasFullSetup ._hasFullSetupX { display: none; }
#imgbtn .modify { display: none; }
#imgbtn form._imgUploaded .upload { display: none; }
#design ._site { display: none; }
#design._mobile_view_disabled #mobile .shadow,
#design._mobile_view_disabled._mobileMode .nav,
#design._mobileMode._mobile_view_disabled .btnBoth,
/* 저장 버튼 라벨: 열린 탭에 맞춰 하나만 보인다 (PC 설정 / 반응형 뷰 / 모바일 설정 + 저장) */
#design .langResponsive { display: none; }
#design._pcMode .langMobile, #design._pcMode .langResponsive { display: none; }
#design._pcMode._responsiveMode .langDesktop { display: none; }
#design._pcMode._responsiveMode .langResponsive { display: inline; }
#design._mobileMode .langDesktop, #design._mobileMode .langResponsive { display: none; }
#site._siteDesign #design .mvOption { display: none; }
/* ═══════ 레이아웃/스킨 목록 (.theme) — 카드형 ═══════ */
#site .theme .list > ul, #site .theme ul._layout_list, #site .theme ul._skin_list { margin: 0; padding: 0; list-style: none; }
#site .theme ._layoutItem, #site .theme .list > ul > li {
	list-style: none;
	margin: 0 0 10px;
	padding: 12px;
	border: 1px solid var(--zm-line, #e5e9f0);
	border-radius: 10px;
	background: var(--zm-surface, #fff);
	position: relative;
}
#site .theme ._layoutItem, #site .theme .list > ul > li { cursor: pointer; transition: border-color .12s ease, background .12s ease, box-shadow .12s ease; }
#site .theme ._layoutItem:hover, #site .theme .list > ul > li:hover { border-color: var(--zm-brand, #2677e3); }
#site .theme .selected {
	border-color: var(--zm-brand, #2677e3);
	background: var(--zm-brand-soft, #e8f1fd);
	box-shadow: 0 0 0 1px var(--zm-brand, #2677e3);
}
#site .theme ._layoutItem > label, #site .theme .list > ul > li > label {
	display: flex; align-items: center; gap: 7px;
	margin: 0 0 8px; padding: 0; border: 0;
	font-size: 13px; font-weight: 600; color: var(--zm-ink, #3d4451);
	cursor: pointer; white-space: normal;
}
#site .theme .selected > label { color: var(--zm-brand-dark, #1b5fc0); }
/* 라디오 버튼 숨김 — 카드 클릭 자체가 선택 (JS가 라디오 토글) */
#site .theme ._layoutItem input[type=radio], #site .theme .list > ul > li input[type=radio] {
	position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none;
}
/* 선택된 카드 라벨 앞 체크 표시 */
#site .theme .selected > label::before {
	content: "";
	flex: 0 0 auto;
	width: 16px; height: 16px;
	background-color: var(--zm-brand, #2677e3);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 썸네일 */
#site .theme button.item, #site .theme ._btnScreenshot {
	display: block; width: 100%; padding: 0; margin: 0;
	border: 1px solid var(--zm-line, #e5e9f0); border-radius: 8px;
	background: var(--zm-surface-3, #fafbfd); overflow: hidden; cursor: pointer;
}
#site .theme button.item img, #site .theme ._thumbnail { display: block; width: 100%; height: auto; }
/* 편집 서브메뉴 (상세설정/복사본 생성/삭제) */
#layout li ul._edit_menu, #skin li ul._edit_menu { display: none; margin: 10px 0 0; padding: 0; list-style: none; }
#layout li.selected ul._edit_menu, #skin li.selected ul._edit_menu { display: block; }
#site .theme ul._edit_menu > li { list-style: none; margin: 0; }
#site .theme ul._edit_menu > li > a,
#site .theme ul._edit_menu > li > button {
	display: flex; align-items: center; justify-content: space-between; gap: 6px;
	width: 100%; box-sizing: border-box;
	padding: 8px 10px; margin: 2px 0;
	border: 1px solid var(--zm-input-border, #d4dae3); border-radius: 7px;
	background: var(--zm-surface, #fff); color: var(--zm-ink, #3d4451);
	font-size: 12.5px; text-align: left; cursor: pointer; text-decoration: none;
}
#site .theme ul._edit_menu > li > a:hover,
#site .theme ul._edit_menu > li > button:hover {
	border-color: var(--zm-brand, #2677e3); color: var(--zm-brand, #2677e3); background: var(--zm-brand-soft, #e8f1fd);
}
#site .theme ul._edit_menu i.x_icon-circle-arrow-right { margin-left: auto; }
#skin .mask { display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: var(--zm-surface, #fff); opacity: .55; z-index: 99; }
#layout .disabled > .mask, #skin .disabled > .mask { display: block; cursor: not-allowed; }
#msgBox._type_alert ._cancel { display: none; }
/* 사이트 디자인 모드에선 메뉴별 저장버튼(siteMapUI) 숨김 — PC/모바일 설정 저장으로 대체.
   특이도를 확인바 규칙(#site .cnt > .x_btn-group)보다 높여 확실히 숨김 */
#site._siteDesign .siteMapUI,
#site._siteDesign .cnt > .siteMapUI { display: none !important; }
#site._siteMap .siteDesignUI,
#site._siteMap .cnt > .siteDesignUI { display: none !important; }
._siteDesign .theme .cnt > label:first-child { display: none; }
._quick_help.x_alert {
	display: none;
	position: fixed;
	top: 72px; left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	width: min(600px, 90vw);
	background: var(--zm-brand-soft, #e8f1fd);
	border: 1px solid rgba(38,119,227,.25);
	color: var(--zm-brand-dark, #1b5fc0);
	border-radius: 10px;
	box-shadow: var(--zm-shadow, 0 10px 28px -14px rgba(61,68,81,.3));
	padding: 12px 16px;
	font-size: 12.5px;
}
.x_alert-info.x_alert { display: none; box-sizing: border-box; width: auto; min-width: 100%; }

/* ═══════ 모바일 ═══════ */
@media screen and (max-width: 960px) {
	#site { white-space: normal; overflow: visible; min-height: 0; }
	.col, .col.map {
		display: block;
		width: 100%;
		min-height: 0;
		height: auto;
		margin: 0 0 14px;
	}
	.col .cnt { max-height: none; }
	._addSiteMap1 { position: static !important; margin: 10px 18px 16px; display: inline-flex !important; }
	._quick_help.x_alert { top: auto; bottom: 12px; }
}

/* 디자인 설정 - 테마 패널 */
#site #theme ._theme_list li._themeItem { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#site #theme ._theme_list li._themeItem label { flex: 1; min-width: 0; cursor: pointer; }
#site #theme ._theme_list .themeVersion { margin-left: 6px; font-size: 12px; color: #888; }
#site #theme ._btnThemeInfo { flex: 0 0 auto; padding: 3px 10px; font-size: 12px; }
#site #theme ._themeEmpty { padding: 20px 4px; color: #888; }
#site #themeInfo ._theme_info_list li { padding: 8px 4px; border-bottom: 1px solid #eee; font-size: 13px; color: #555; }
#site #themeInfo ._theme_info_list li._themeMeta { font-size: 15px; color: #222; }
#site #themeInfo ._theme_info_list li._themeMeta span { margin-left: 6px; font-size: 12px; color: #888; }
#site #themeInfo ._theme_info_list li._themeDesc { color: #777; white-space: normal; }

/* 테마 목록 - 항목 클릭으로 선택 (레이아웃 목록과 같은 방식) */
#site #theme ._theme_list li._themeItem { cursor: pointer; }
#site #theme ._theme_list li._themeItem label { cursor: pointer; }
#site #theme ._theme_list li._themeItem.selected { background: #eef4ff; }
#site #theme ._theme_list li._themeItem.selected label { font-weight: bold; color: #2677e3; }

/* 디자인 설정 - 반응형 미리보기 탭 */
#site #design #responsive ._responsiveHint { margin: 0 0 10px; font-size: 12px; color: #666; line-height: 1.5; }
#site #design #responsive ._responsiveShadow iframe { width: 375px; max-width: 100%; }

/* 홈이 있는 사이트맵 표시 별표 */
#siteMapTree ._homeSitemapStar { display: inline-flex; vertical-align: middle; margin-left: 4px; cursor: help; }
#siteMapTree ._homeSitemapStar svg { display: block; }

/* 별표 레이어 툴팁 — body 최상단에 띄운다(트리의 overflow 에 잘리지 않게) */
#zmHomeTooltip {
	position: fixed;
	z-index: 100000;
	padding: 6px 10px;
	font-size: 12px; font-weight: 500; line-height: 1.4;
	color: #fff;
	background: rgba(30,37,48,.94);
	border-radius: 7px;
	box-shadow: 0 6px 20px -6px rgba(0,0,0,.4);
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	/* 위치는 JS가 left/top 으로 잡고, transform 으로 별 위쪽 중앙에 건다 */
	transform: translate(-50%, -100%);
	transition: opacity .12s ease;
}
#zmHomeTooltip.on { opacity: 1; }
#zmHomeTooltip::after {
	content: "";
	position: absolute;
	left: 50%; top: 100%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: rgba(30,37,48,.94);
}

/* 리프 노드도 폴더 아이콘 폭을 비워 형제 항목과 정렬한다 */
.mapi li.jstree-leaf > ins.jstree-icon { width: 17px; }

/* 스킨 목록은 레이아웃 목록과 같이 비활성 덮개를 쓰지 않는다 */
#skin .mask, #skin .disabled > .mask { display: none !important; }
