/*
 * 기본 타입 설정 + Pretendard self-host 폰트 등록.
 *
 * Pretendard 는 SIL Open Font License 1.1 로 배포되며, woff2 4개 weight 만 사용한다.
 * 폰트 파일은 Library/fonts/Pretendard/ 에 self-host 한다. CDN 장애/망 차단 환경 대비.
 */

@font-face {
	font-family: "Pretendard";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("/Library/fonts/Pretendard/Pretendard-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Pretendard";
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url("/Library/fonts/Pretendard/Pretendard-Medium.woff2") format("woff2");
}

@font-face {
	font-family: "Pretendard";
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url("/Library/fonts/Pretendard/Pretendard-SemiBold.woff2") format("woff2");
}

@font-face {
	font-family: "Pretendard";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("/Library/fonts/Pretendard/Pretendard-Bold.woff2") format("woff2");
}

html {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-fg-default);
	background-color: var(--color-bg-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-size-adjust: 100%;
}

body {
	min-height: 100vh;
}

@media (min-width: 1921px) and (min-height: 1081px) {
	body.is-monitoring-upscaled {
		min-height: var(--scaled-app-height, 100vh);
		overflow: hidden;
	}

	body.is-monitoring-upscaled .app {
		width: 1920px !important;
		min-height: 1080px !important;
		transform: scale(var(--viewport-scale, 1));
		transform-origin: top center;
	}
}

/* 하단 고정(모바일형) 메뉴 전환 기준.
 *
 * 이전에는 1919px 였으나 FHD(1920x1080) 모니터에서도 항상 걸렸다.
 * CSS 뷰포트 폭은 물리 해상도와 다르다.
 *   - 세로 스크롤바: 1920 -> 약 1905px
 *   - Windows 배율 125%: 1920 -> 1536px
 *   - Windows 배율 150%: 1920 -> 1280px
 * 위 경우 모두 1919px 조건에 걸려 FHD PC 가 모바일 화면으로 바뀌었다.
 * 모바일 전환 기준은 가로 1200px 이다. FHD 는 항상 상단 메뉴를 유지한다.
 */
@media (max-width: 1200px) {
	body.has-responsive-bottom-nav {
		padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
	}

	.main-topbar .nav-toggle {
		display: none !important;
	}

	.main-topbar .nav,
	.monitoring-nav {
		position: fixed !important;
		left: 50% !important;
		right: auto !important;
		bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
		z-index: 1000 !important;
		width: min(680px, calc(100vw - 24px)) !important;
		margin: 0 !important;
		padding: 6px !important;
		border: 1px solid rgba(6, 182, 212, .52) !important;
		border-radius: 999px !important;
		background: rgba(7, 16, 28, .94) !important;
		box-shadow: 0 14px 34px rgba(0, 0, 0, .48), inset 0 0 0 1px rgba(0, 255, 255, .08) !important;
		backdrop-filter: blur(14px);
		transform: translateX(-50%) !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		max-height: none !important;
		overflow: visible !important;
	}

	.main-topbar .nav,
	.monitoring-nav__list {
		display: grid !important;
		grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)) !important;
		gap: 4px !important;
		align-items: stretch !important;
	}

	.monitoring-nav__list {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	.monitoring-nav__item {
		min-width: 0 !important;
	}

	.main-topbar .nav a[href="/monitoring/display"],
	.monitoring-nav__link[href="/monitoring/display"] {
		display: none !important;
	}

	.main-topbar .nav a,
	.monitoring-nav__link {
		min-width: 0 !important;
		min-height: 60px !important;
		padding: 7px 4px 8px !important;
		display: grid !important;
		place-items: center !important;
		align-content: center !important;
		gap: 5px !important;
		border: 1px solid transparent !important;
		border-radius: 999px !important;
		background: transparent !important;
		color: #AEBBD0 !important;
		font-size: 12px !important;
		font-weight: 700 !important;
		line-height: 1.1 !important;
		text-align: center !important;
		text-decoration: none !important;
		white-space: nowrap !important;
		box-shadow: none !important;
		transform: none !important;
	}

	.main-topbar .nav a::before,
	.monitoring-nav__link::before {
		content: "";
		width: 22px;
		height: 3px;
		display: block;
		border-radius: 999px;
		background: rgba(174, 187, 208, .35);
	}

	.main-topbar .nav a:hover,
	.main-topbar .nav a.active,
	.monitoring-nav__link:hover,
	.monitoring-nav__link--active {
		border-color: rgba(0, 255, 255, .42) !important;
		background: rgba(0, 255, 255, .16) !important;
		color: #F8FBFF !important;
		box-shadow: inset 0 0 0 1px rgba(0, 255, 255, .12) !important;
	}

	.main-topbar .nav a:hover::before,
	.main-topbar .nav a.active::before,
	.monitoring-nav__link:hover::before,
	.monitoring-nav__link--active::before {
		background: #00FFFF;
		box-shadow: 0 0 12px rgba(0, 255, 255, .58);
	}
}