@charset "UTF-8";

/* ==========================================
   004 / server-mgmt.css
   서버관리 페이지
   ========================================== */

.sv-container {
	margin: 0 auto;
	box-sizing: border-box;
}

/* ============================
   Section 1 — Hero
   canvas: 0~305px, height 305px
   ============================ */
.sv-section1 {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 40px 20px 30px;
	background-image: url('../../images/maintenance/server-mgmt/boxBG_24977.png');
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center bottom;
}

.sv-logo-wrap {
	position: relative;
	width: 327px;
	height: 160px;
	flex-shrink: 0;
}

.sv-logo-img {
	position: absolute;
	top: 0;
	left: 76px;
	width: 251px;
	height: auto;
}

.sv-logo-bg {
	position: absolute;
	top: 0;
	left: 5px;
	width: 106px;
	height: auto;
}

/* Script "서버\n관리": top:113, left:5, 90×87, 40px/white */
.sv-script {
	position: absolute;
	top: 10px;
	left: 5px;
	width: 90px;
	font-family: 'Nanum Brush Script', cursive;
	font-size: 40px;
	font-weight: 400;
	line-height: 1;
	color: #ffffff;
	text-align: center;
	text-shadow: 0px 0px 5px #E1692A;
	margin: 0;
}

/* Hero text group: top:56, left:367, 685px, flex-column */
.sv-hero-text-group {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-grow: 1;
}

/* Big title "서버관리": 44px/600/#005728 */
.sv-big-title {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	font-size: 44px;
	font-weight: 600;
	letter-spacing: -1px;
	line-height: 1.6;
	color: #005728;
	margin: 0;
}

/* Sub label: 18px/500, margin-top to reproduce gap (125-56=69, minus line-height ~70px → ~0) */
.sv-sub-label {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.6;
	color: #333333;
	margin: 0;
}

/* Desc: 16px/400 */
.sv-desc {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.4;
	color: #333333;
	margin: 0;
}

/* Deco image: top:173, left:898, 115×89 */
.sv-deco-img {
	position: absolute;
	top: 173px;
	left: 928px;
	/* Original legacy coordinate */
	width: 115px;
	height: 89px;
	z-index: 1;
}

/* ============================
   Section 2 — Diagram
   canvas: 305~960px, height 655px
   ============================ */
.sv-section2,
.sv-section3,
.sv-section4,
.sv-section5 {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
	margin-top: 20px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sv-title {
	position: relative;
	display: flex;
	align-items: center;
	margin-top: 40px;
	margin-bottom: 20px;
	width: 100%;
	justify-content: flex-start;
}

.sv-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #555662;
	flex-shrink: 0;
	margin-right: 11px;
}

.sv-heading {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.4;
	color: #333333;
	margin: 0;
}

.sv-gray-box {
	width: 100%;
	height: auto;
	background-color: #F6F6F6;
	border: 1px solid #D9D9D9;
	padding: 25px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.sv-diagram-wrap {
	position: relative;
	width: 1038px;
	height: 600px;
	margin: 0 auto;
	flex-shrink: 0;
}

.sv-dg-group,
.sv-dg-item {
	display: contents;
}



/* Center bg: top:55, left:204, 633×430 */
.sv-center-bg {
	position: absolute;
	top: 55px;
	left: 204px;
	width: 633px;
	height: 430px;
	background-image: url('../../images/maintenance/server-mgmt/boxBG_24989.png');
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center center;
}

/* Center logo: top:222, left:462, 116×38 */
.sv-center-logo {
	position: absolute;
	top: 222px;
	left: 462px;
	width: 116px;
	height: 38px;
}

/* Center title "서버운영관리": top:270, left:379, 282×59, 26px/600/center */
.sv-center-title {
	position: absolute;
	top: 270px;
	left: 379px;
	width: 282px;
	height: 59px;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
	color: #333333;
	text-align: center;
	margin: 0;
	overflow: hidden;
}

/* Boxes: 350×60, border #409C71, radius:3px */
.sv-box {
	position: absolute;
	width: 350px;
	height: 60px;
	border: 1px solid #409C71;
	border-radius: 3px;
}

.sv-box-lt {
	top: 60px;
	left: 0;
}

.sv-box-rt {
	top: 60px;
	left: 688px;
}

.sv-box-lb {
	top: 384px;
	left: 0;
}

.sv-box-rb {
	top: 384px;
	left: 688px;
}

/* Box bc: top:499, left:298, 408×60 */
.sv-box-bc {
	position: absolute;
	top: 499px;
	left: 298px;
	width: 408px;
	height: 60px;
	border: 1px solid #409C71;
	border-radius: 3px;
}

/* Box text: 16px/400/0px/-1.4 */
.sv-box-text {
	position: absolute;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
	color: #333333;
	margin: 0;
	list-style: none;
	padding: 0;
}

.sv-box-text li {
	display: flex;
	align-items: flex-start;
}

.sv-box-text li::before {
	content: "-";
	flex-shrink: 0;
	margin-right: 8px;
}

.sv-box-lt-text {
	top: 68px;
	left: 9px;
	width: 329px;
}

.sv-box-rt-text {
	top: 68px;
	left: 697px;
	width: 329px;
}

.sv-box-lb-text {
	top: 392px;
	left: 9px;
	width: 329px;
}

.sv-box-rb-text {
	top: 392px;
	left: 697px;
	width: 329px;
}

.sv-box-bc-text {
	top: 507px;
	left: 307px;
	width: 400px;
}

/* Icon images: 134×135 */
.sv-icon {
	position: absolute;
	width: 134px;
	height: 135px;
	z-index: 2;
}

.sv-icon-check1 {
	top: 79px;
	left: 330px;
}

.sv-icon-monitor {
	top: 79px;
	left: 582px;
}

.sv-icon-security {
	top: 270px;
	left: 291px;
}

.sv-icon-report {
	top: 270px;
	left: 622px;
}

.sv-icon-check2 {
	top: 381px;
	left: 453px;
}

/* Icon text labels: 18px/600/#0C7445/center */
.sv-icon-label {
	position: absolute;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	color: #0C7445;
	text-align: center;
	margin: 0;
	width: 119px;
	height: 61px;
	z-index: 5;
	display: block;
	overflow: hidden;
}

/* Precise coordinates based on Legacy Icon Position + Legacy Internal Label Offset */
.sv-icon-check1-label {
	top: 120px;
	left: 337px;
}

.sv-icon-monitor-label {
	top: 132px;
	left: 589px;
}

.sv-icon-security-label {
	top: 321px;
	left: 298px;
}

.sv-icon-report-label {
	top: 311px;
	left: 629px;
}

.sv-icon-check2-label {
	top: 422px;
	left: 460px;
}

/* ============================
   Section 3 — IDC센터
   canvas: 960~1325px, height 365px
   ============================ */
.sv-idc-content {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

.sv-idc-img-wrap {
	position: relative;
	flex-shrink: 0;
}

.sv-idc-img {
	position: relative;
	width: 331px;
	height: auto;
	display: block;
}

.sv-deco3 {
	position: absolute;
	bottom: -40px;
	right: -60px;
	width: 198px;
	height: auto;
}

.sv-idc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-left: 20px;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 2;
	color: #333333;
	border-left: 2px solid #A6CC92;
	/* Simplified green line to replace boxBG_25021.png */
}

.sv-idc-list li {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
}

.sv-sub-text {
	position: relative;
	font-size: 17px;
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.6;
	color: #333333;
	margin-bottom: 20px;
}

.sv-icon-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	background-color: #ffffff;
	border: 1px solid #D9D9D9;
	padding: 30px;
}

.sv-icon-btn {
	position: relative;
	width: 77px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sv-icon-btn img {
	width: 77px;
	height: auto;
	display: block;
}

.sv-btn-label {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.2;
	color: #FFFFFF;
	text-align: center;
	margin: 0;
}



.sv-card-group {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	width: 100%;
	justify-content: center;
}

.sv-card {
	width: 240px;
	height: auto;
	min-height: 240px;
	background-color: #F6F6F6;
	border: 1px solid #D9D9D9;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
}

.sv-card-head {
	position: relative;
	height: 65px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px 5px 0 0;
	margin: 10px 10px 0;
}

.sv-card-head img {
	width: 217px;
	height: 58px;
	position: absolute;
	top: 4px;
	left: 50%;
	transform: translateX(-50%);
}

.sv-card-title {
	position: relative;
	z-index: 1;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -1px;
	color: #FFFFFF;
	margin: 0;
}

.sv-card-body {
	padding: 15px;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.6;
	color: #333333;
	margin: 0;
	list-style: none;
}

.sv-card-body li {
	display: flex;
	align-items: flex-start;
}

.sv-card-body li::before {
	content: "·";
	flex-shrink: 0;
	margin-right: 8px;
}

/* ==============================================
   Responsive — 1100px
   ============================================== */
@media screen and (max-width: 1100px) {
	.sv-big-title {
		font-size: 38px;
	}

	.sv-heading {
		font-size: 22px;
	}

	/* Diagram Responsive: Hide decorations, show list */
	.sv-diagram-wrap {
		width: 100%;
		height: auto;
		transform: none;
		margin-bottom: 40px;
	}

	.sv-diagram-wrap>*:not(.sv-dg-group) {
		display: none !important;
	}

	.sv-dg-group {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 30px;
		width: 100%;
	}

	.sv-dg-item {
		display: flex;
		flex-direction: column;
		gap: 15px;
		background-color: #ffffff;
		border: 1px solid #eee;
		padding: 20px;
		border-radius: 8px;
	}

	.sv-icon-label {
		position: static;
		width: 100%;
		height: auto;
		text-align: left;
		padding-left: 12px;
		border-left: 5px solid #0C7445;
		font-size: 19px;
		line-height: 1.4;
		justify-content: flex-start;
		overflow: visible;
		color: #0C7445;
		white-space: nowrap;
	}

	.sv-icon-label br {
		display: none;
	}

	.sv-box-text {
		position: static;
		width: 100%;
		height: auto;
		padding-left: 12px;
		font-size: 15px;
	}

	.sv-deco-img,
	.sv-deco3 {
		display: none;
	}

	.sv-card-group {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		justify-content: start;
	}

	.sv-card {
		width: 100%;
	}
}

/* ==============================================
   Responsive — 800px
   ============================================== */
@media (max-width: 800px) {
	.sv-section1 {
		flex-direction: column;
		height: auto;
		padding: 40px 0;
		text-align: left;
		background-image: none !important;
	}

	.sv-dg-group {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.sv-diagram-wrap {
		display: block;
		height: auto;
	}

	.sv-logo-wrap {
		display: none;
	}

	.sv-hero-text-group {
		width: 100%;
		align-items: flex-start;
		padding: 0 20px;
		box-sizing: border-box;
	}

	.sv-big-title {
		font-size: 28px;
	}

	.sv-sub-label {
		font-size: 16px;
	}

	.sv-desc {
		font-size: 14px;
	}

	.sv-title {
		width: 100%;
		max-width: 100%;
		padding: 0 20px;
		margin-top: 0;
		box-sizing: border-box;
	}

	.sv-heading {
		font-size: 20px;
	}

	.sv-gray-box {
		padding: 20px;
	}

	.sv-idc-content {
		flex-direction: column;
		gap: 20px;
	}

	.sv-idc-img {
		width: 100%;
	}

	.sv-idc-list {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
	}

	.sv-sub-text {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		height: auto;
		overflow: visible;
	}

	.sv-icon-grid {
		padding: 15px;
		gap: 10px;
	}

	.sv-icon-btn {
		width: 60px;
	}

	.sv-script {
		display: none;
	}

	.sv-card-group {
		grid-template-columns: 1fr;
		justify-items: start;
	}

	.sv-card {
		width: 100%;
		min-height: auto;
		margin-bottom: 15px;
	}

	.sv-logo-bg {
		display: none;
	}
}