/* [시스템 설정 > 기본 설정] — 로고/워드마크 */

/* 등록된 로고 미리보기 (체크무늬 = 투명 영역) */
div.brand-logo-preview {
	display:flex;
	align-items:center;
}
span.brand-logo-box {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:180px;
	min-height:60px;
	padding:8px 12px;
	border:1px solid #ddd;
	border-radius:4px;
	background-color:#fff;
	background-image:
		linear-gradient(45deg,#f0f0f0 25%,transparent 25%,transparent 75%,#f0f0f0 75%),
		linear-gradient(45deg,#f0f0f0 25%,transparent 25%,transparent 75%,#f0f0f0 75%);
	background-size:16px 16px;
	background-position:0 0,8px 8px;
}
img.brand-logo-img {
	max-height:44px;
	max-width:280px;
	width:auto;
	object-fit:contain;
}
span.brand-logo-empty {
	color:#999;
	font-size:90%;
}

/* 섹션 제목 */
h4.brand-section-title {
	margin:1.6em 0 .5em;
	padding-bottom:.3em;
	border-bottom:1px solid #e2e5ea;
	max-width:900px;
}
h4.brand-section-title:first-of-type { margin-top:.8em; }

/* [따로 설정]을 끈 상태의 항목 — 값은 그대로 두고 흐리게만 표시한다(입력은 JS 가 disabled 처리) */
tr.brand-row-off > th,
tr.brand-row-off > td { opacity:.45; }

/* 색상 견본 (체크무늬 = 비어 있음/투명) */
span.brand-color-sample {
	display:inline-block;
	width:22px;
	height:22px;
	margin:0 .4em -6px .3em;
	border:1px solid #ccc;
	border-radius:3px;
	background-color:transparent;
	background-image:
		linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%),
		linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%);
	background-size:10px 10px;
	background-position:0 0,5px 5px;
}

/* 헤더 미리보기 */
div.brand-head-preview {
	max-width:520px;
}
div.brand-head-bar {
	display:flex;
	align-items:center;
	gap:8px;
	height:44px;
	padding:0 12px;
	border-radius:6px;
	background:#243046;
	color:#fff;
	font-size:13px;
	overflow:hidden;
}
span.brand-prev-logo-box {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	box-sizing:border-box;
	height:30px;
	padding:4px 8px;
	border-radius:2px;
}
img.brand-prev-logo {
	display:block;
	width:auto;
	height:22px;
	max-width:112px;
	object-fit:contain;
}
span.brand-prev-wordmark {
	font-weight:800;
	font-size:16px;
	white-space:nowrap;
	margin-right:10px;
}
span.brand-prev-menu {
	color:#b9c5da;
	font-size:12.5px;
	padding:0 6px;
	white-space:nowrap;
}

/* 로그인 화면 미리보기 */
div.brand-login-preview {
	max-width:340px;
	padding:18px;
	border-radius:8px;
	background:#f4f6f9;
}
div.brand-login-card {
	border:1px solid #e4e8ee;
	border-radius:12px;
	padding:20px 18px 18px;
	background:#fff;
	text-align:center;
	color:#1f2733;
}
span.brand-prev-login-chip {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	margin-bottom:10px;
}
span.brand-prev-login-chip.has-bg {
	padding:8px 12px;
	border-radius:8px;
}
img.brand-prev-login-logo {
	display:block;
	max-height:44px;
	max-width:200px;
	width:auto;
	object-fit:contain;
}
div.brand-prev-login-name {
	font-size:22px;
	font-weight:800;
	margin-bottom:12px;
}
div.brand-prev-login-label {
	font-size:11.5px;
	text-align:left;
	opacity:.75;
	margin-bottom:3px;
}
div.brand-prev-login-input {
	height:26px;
	border:1px solid #d8dde5;
	border-radius:5px;
	background:#fff;
	margin-bottom:9px;
}
div.brand-prev-login-btn {
	height:28px;
	line-height:28px;
	border-radius:5px;
	background:#2563eb;
	color:#fff;
	font-size:12.5px;
	font-weight:600;
}

/* 어두운 배경일 때 — 실제 로그인 화면(brandLogin.html)과 같은 규칙으로 미리 보여준다 */
div.brand-login-card.is-dark { color:#eef1f6; }
div.brand-login-card.is-dark div.brand-prev-login-input {
	background:rgba(255,255,255,0.08);
	border-color:rgba(255,255,255,0.28);
}

/* 미리보기용 로고 색 강제 — 실제 화면과 같은 mask 방식 */
span.brand-prev-logo-wrap,
span.brand-prev-login-wrap {
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
}
span.brand-prev-logo-wrap::after,
span.brand-prev-login-wrap::after {
	content:'';
	display:none;
}
@supports ((-webkit-mask-image: url("#")) or (mask-image: url("#"))) {
	span.brand-prev-logo-wrap.brand-logo-tint > img,
	span.brand-prev-login-wrap.brand-logo-tint > img {
		visibility:hidden;
	}
	span.brand-prev-logo-wrap.brand-logo-tint::after,
	span.brand-prev-login-wrap.brand-logo-tint::after {
		display:block;
		position:absolute;
		top:0; right:0; bottom:0; left:0;
		background-color:var(--brand-logo-tint, #000);
		-webkit-mask-image:var(--brand-logo-url);
		mask-image:var(--brand-logo-url);
		-webkit-mask-repeat:no-repeat;
		mask-repeat:no-repeat;
		-webkit-mask-position:center;
		mask-position:center;
		-webkit-mask-size:contain;
		mask-size:contain;
	}
}