@charset "UTF-8";

/* Pretendard 웹폰트 - 현대적인 크로스 플랫폼 한글 폰트 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* 메인 폰트 스택 - Pretendard 우선 적용 */
body,h1,h2,h3,h4,h5,h6,p{
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont,
                 system-ui, 'Malgun Gothic', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 반응형 폰트 크기 */
body {
    font-size: 16px;
}

/* 모바일 최적화 (768px 이하) */
@media (max-width: 768px) {
    body {
        font-size: 15px;
    }
}

/* 큰 화면 최적화 (1920px 이상) */
@media (min-width: 1920px) {
    body {
        font-size: 17px;
    }
}

/* 제목 및 본문 폰트 굵기 최적화 */
h1, h2, h3 {
    font-weight: 700; /* Bold */
}

h4, h5, h6 {
    font-weight: 600; /* SemiBold */
}

p {
    font-weight: 450; /* Medium */
}

@media (min-width:992px){
	#main-navbar{float:left}
	#sub-navbar,.searchbox{float:right}
	.searchbox{display:table;width:400px}
}
.searchbox{margin:10px 0}
.stick{background-color:#fff;top:0;left:0;width:100%;z-index:10;margin:0}
.stick>.container{padding:10px 5px}
#logo-navbar.navbar-default{background-color:transparent;border-color:transparent}
.breadcrumb-box{width:100%}
.breadcrumb-box .breadcrumb+.input-group-btn .btn{padding:7px 12px;margin-left:5px}
.btn-list{margin:20px 0}
.fa-5x+.text-icon{font-size:1.3em;top:18px!important}
#site-link{margin-left:5px}
.video-container iframe{width:100%}
.form-group .row>div{margin-bottom:10px}
footer{font-size:12px;padding-top:32px}
.text-color-white{color:#fff!important}
.bordered{border:1px solid #ccc}
.fixed-width{width:180px}
.navbar-mobile#main-navbar, .zp-top-nav#main-navbar{float:none;display:block!important;padding:5px;margin:0;border:0;background-color:transparent}
.navbar-mobile .navbar-brand, .zp-top-nav .navbar-brand{height:50px;margin-top:0;float:left;padding:0}
@media (min-width:768px){
	.stick{position:fixed}
	.zp-top-nav .navbar-collapse{display:block!important}
}

/* Horizontal scrolling menu - mobile only */
@media (max-width: 768px) {
	.navbar-horizontal-scroll {
		overflow-x: auto;
		overflow-y: visible!important;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
		display: block!important;
		width: 100%;
		position: static!important;
	}

	.navbar-horizontal-scroll .nav-pills {
		display: inline-flex;
		flex-wrap: nowrap;
		width: auto;
		float: none!important;
	}

	.navbar-horizontal-scroll .nav-pills > li {
		float: none!important;
		display: inline-block;
		white-space: nowrap;
		position: static!important;
	}
	
	/* Reduce font size by 10% for mobile menu */
	.navbar-horizontal-scroll .nav-pills > li > a {
		font-size: 90%;
		white-space: nowrap;
	}
	
	/* Mobile submenu styles - display like desktop */
	.navbar-horizontal-scroll .cbp-hrsub {
		display: none;
		position: fixed!important;
		top: auto!important;
		left: 0!important;
		right: 0!important;
		width: 100%!important;
		max-height: 70vh;
		overflow-y: auto;
		background: #fff;
		border: 1px solid #ddd;
		box-shadow: 0 2px 10px rgba(0,0,0,0.2);
		z-index: 9999!important;
		white-space: normal;
		margin: 0!important;
	}
	
	.navbar-horizontal-scroll .nav-pills > li.cbp-hropen > .cbp-hrsub {
		display: block!important;
	}
	
	.navbar-horizontal-scroll .cbp-hrsub-inner {
		padding: 15px;
		display: block!important;
		width: 100%;
	}
	
	/* Desktop-like submenu layout */
	.navbar-horizontal-scroll .cbp-hrsub > div > ul {
		list-style: none;
		padding: 0;
		margin: 0;
		display: block!important;
		width: 100%;
	}
	
	.navbar-horizontal-scroll .cbp-hrsub > div > ul > li {
		display: block!important;
		width: 100%;
		float: none!important;
		margin-bottom: 10px;
	}
	
	.navbar-horizontal-scroll .cbp-hrsub h4 {
		font-size: 16px;
		margin: 0 0 10px 0;
		padding-bottom: 10px;
		color: #333;
	}
	
	.navbar-horizontal-scroll .cbp-hrsub ul ul {
		list-style: none;
		padding: 0;
		margin: 10px 0 0 0;
	}
	
	.navbar-horizontal-scroll .cbp-hrsub ul ul li {
		display: block;
		padding: 8px 0;
		border-bottom: 1px solid #eee;
	}
	
	.navbar-horizontal-scroll .cbp-hrsub ul ul li:last-child {
		border-bottom: none;
	}
	
	.navbar-horizontal-scroll .cbp-hrsub ul ul li a {
		color: #555;
		text-decoration: none;
		display: block;
		padding: 5px 10px;
	}
	
	.navbar-horizontal-scroll .cbp-hrsub ul ul li a:hover {
		color: #428bca;
		background: #f5f5f5;
	}
	
	/* Overlay for submenu */
	.submenu-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 9998;
	}
	
	/* iOS specific fixes for submenu z-index issues - keep all Android styles */
	.ios-device .navbar-horizontal-scroll .cbp-hrsub {
		/* Override only z-index for iOS, keep all other styles from base */
		z-index: 2147483647!important; /* Maximum z-index value */
		-webkit-transform: translate3d(0, 0, 9999px);
		transform: translate3d(0, 0, 9999px);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		will-change: transform;
		isolation: isolate;
	}
	
	
	.ios-device .submenu-overlay {
		z-index: 2147483646!important;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
	
	/* Ensure images and other content don't overlap on iOS - inherit base styles */
	.ios-device .navbar-horizontal-scroll .nav-pills > li.cbp-hropen > .cbp-hrsub,
	.ios-device body > .cbp-hrsub {
		z-index: 2147483647!important;
		-webkit-transform: translate3d(0, 0, 9999px)!important;
		transform: translate3d(0, 0, 9999px)!important;
	}
	
	/* When submenu is in body, keep base layout styles */
	body > .cbp-hrsub,
	.ios-device body > .cbp-hrsub {
		display: block!important;
		position: fixed!important;
		left: 0!important;
		right: 0!important;
		width: 100%!important;
		max-height: 70vh!important;
		overflow-y: auto!important;
		border: 1px solid #ddd!important;
		box-shadow: 0 2px 10px rgba(0,0,0,0.2)!important;
		white-space: normal!important;
		margin: 0!important;
		padding: 0!important;
		/* Background will be inherited from .zinpack-style .cbp-hrsub in theme.php */
	}
	
	/* Ensure theme styles apply to body submenu */
	.zinpack-style body > .cbp-hrsub {
		/* This selector will inherit theme background from theme.php */
	}
	
	/* Ensure basic layout for body submenu - let theme.php handle colors */
	body > .cbp-hrsub .cbp-hrsub-inner,
	.ios-device body > .cbp-hrsub .cbp-hrsub-inner {
		padding: 15px;
		display: block!important;
		width: 100%;
		/* Theme colors will be inherited */
	}
	
	body > .cbp-hrsub > div > ul {
		list-style: none;
		padding: 0;
		margin: 0;
		display: block!important;
		width: 100%;
	}
	
	body > .cbp-hrsub > div > ul > li {
		display: block!important;
		width: 100%;
		float: none!important;
		margin-bottom: 10px;
	}
	
	body > .cbp-hrsub h4 {
		font-size: 16px;
		margin: 0 0 10px 0;
		padding-bottom: 10px;
		/* Color will be inherited from theme */
	}
	
	body > .cbp-hrsub ul ul {
		list-style: none;
		padding: 0;
		margin: 10px 0 0 0;
	}
	
	body > .cbp-hrsub ul ul li {
		display: block;
		padding: 8px 0;
		border-bottom: 1px solid #eee;
	}
	
	body > .cbp-hrsub ul ul li:last-child {
		border-bottom: none;
	}
	
	body > .cbp-hrsub ul ul li a {
		text-decoration: none;
		display: block;
		padding: 5px 10px;
		/* Color will be inherited from theme */
	}
	
	body > .cbp-hrsub ul ul li a:hover {
		/* Hover effect will be handled by theme */
		opacity: 0.5;
	}
	
	/* Force all images and content below submenu on iOS */
	.ios-device img,
	.ios-device iframe,
	.ios-device video,
	.ios-device object,
	.ios-device embed {
		position: relative;
		z-index: auto!important;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
	
	/* Create new stacking context for iOS submenu */
	.ios-device .navbar-horizontal-scroll {
		position: relative;
		z-index: 2147483640!important;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
	
	/* Android - keep original behavior */
	.android-device .navbar-horizontal-scroll .cbp-hrsub {
		z-index: 9999!important;
	}
}

/* Desktop mode - keep original behavior */
@media (min-width: 769px) {
	.navbar-horizontal-scroll {
		display: block!important;
	}
	
	.navbar-horizontal-scroll .nav-pills {
		display: flex;
		flex-wrap: wrap;
	}
}

/* Hide scrollbar for mobile while keeping scroll functionality */
@media (max-width: 768px) {
	.navbar-horizontal-scroll::-webkit-scrollbar {
		display: none;
	}
	
	/* Hide scrollbar for Firefox */
	.navbar-horizontal-scroll {
		scrollbar-width: none;
	}
	
	/* Hide scrollbar for IE, Edge */
	.navbar-horizontal-scroll {
		-ms-overflow-style: none;
	}
}

/* Ensure submenus work with horizontal scroll */
.navbar-horizontal-scroll .cbp-hrsub {
	position: absolute;
	z-index: 1000;
	white-space: normal;
}

@media (max-width: 768px) {
	.navbar-horizontal-scroll {
		padding: 5px 0;
	}

	.navbar-horizontal-scroll .nav-pills > li > a {
		padding: 10px 15px;
	}
}

/* Quick Menu for Admin/SuperAdmin */
.quick-menu {
	position: fixed;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 99999;
	width: 112px;
	background: white;
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', sans-serif;
}

/* 프로필 섹션 */
.profile-section {
	background: linear-gradient(135deg, #e94560 0%, #d63447 100%);
	padding: 18px 15px;
	text-align: center;
	color: white;
}

.profile-title {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 5px 0;
}

.profile-admin-id {
	font-size: 11px;
	font-weight: 400;
	opacity: 0.9;
	margin: 0;
	line-height: 1.4;
	text-align: center;
}

.email-line-1,
.email-line-2 {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	margin: 0 !important;
	padding: 0 !important;
	clear: both !important;
	float: none !important;
}

/* 메뉴 항목 */
.menu-items {
	display: flex;
	flex-direction: column;
}

.menu-item {
	width: 100%;
}

.menu-button {
	width: 100%;
	height: 45px;
	border: none;
	background: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 500;
	color: #333;
	padding: 8px 10px;
	gap: 4px;
	transition: all 0.3s ease;
	text-decoration: none;
	cursor: pointer;
	border-bottom: 1px solid #f0f0f0;
}

.menu-item:last-child .menu-button {
	border-bottom: none;
}

.menu-button:hover {
	background: #fafafa;
	color: #e94560;
	text-decoration: none;
}

.menu-icon {
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.menu-icon svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* 모바일 최적화 (768px 이하) */
@media (max-width: 768px) {
	.quick-menu {
		right: 15px;
		width: 104px;
	}

	.profile-section {
		padding: 15px 12px;
	}

	.profile-title {
		font-size: 13px;
	}

	.profile-admin-id {
		font-size: 10px;
		line-height: 1.3;
		text-align: center;
	}

	.email-line-1,
	.email-line-2 {
		display: block !important;
		width: 100% !important;
		text-align: center !important;
		margin: 0 !important;
		padding: 0 !important;
		clear: both !important;
		float: none !important;
	}

	.menu-button {
		height: 42px;
		padding: 6px 8px;
		font-size: 10px;
	}
}