@charset "utf-8";

.build-order-container {
	font-family: 'Noto Sans KR', sans-serif;
	padding-bottom: 100px;
}

/* ==============================================
   Section 1 — Header
   canvas ref: top 0~265, width 1100px
   content area: padding 0 30px → inner 1040px
============================================== */
.bo-section1 {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 30px;
	box-sizing: border-box;
}

/* Header top */
.bo-header-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding-top: 69px;
	padding-bottom: 20px;
}

/* Title: canvas top:69, left:30 → relative top:69, left:0 */
.bo-intro-title {
	position: relative;
	width: 757px;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.4;
	color: #333333;
	text-align: left;
	margin: 0;
	word-break: keep-all;
}

.bo-intro-title .bo-green {
	color: #13884B;
}

.bo-deco-wrap {
	position: relative;
	width: 256px;
	margin-right: 12px;
	height: 140px;
	flex-shrink: 0;
}

/* Deco image: canvas top:71, left:802 → relative top:71, right:12
   (1040 - (802-30) - 256 = 12px) */
.bo-deco {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('../../images/build/build-order/boxBG_32833.png');
	background-repeat: no-repeat;
	background-size: auto;
	background-position: right bottom;
}

/* "1:1" overlay text: canvas top:68, left:837 → relative top:68, left:807
   z-index above deco */
.bo-onetoone {
	position: absolute;
	top: -3px;
	left: 35px;
	width: 60px;
	height: 34px;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.6;
	color: #FFFFFF;
	text-align: center;
	margin: 0;
	z-index: 2;
}

/* Nav strip: canvas top:148, left:30, width:1040, height:117, bg:#A9A9A9 */
.bo-nav-strip {
	position: relative;
	width: 100%;
	height: 117px;
	background-color: #A9A9A9;
	display: flex;
	align-items: center;
}

/* Left gray area: width 229px (white block starts at canvas left:259 → 259-30=229) */
.bo-nav-left {
	position: relative;
	width: 229px;
	height: 117px;
	flex-shrink: 0;
	flex-shrink: 1;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Arrow icon: canvas top:162, left:117 → relative to strip: top:14, left:87 */
.bo-nav-arrow {
	margin-top: 14px;
	width: 37px;
	height: 58px;
	display: block;
}

/* "구축방법" label: canvas top:226, left:30 → relative to strip: top:78, left:0 */
.bo-nav-label {
	margin-top: 6px;
	width: 210px;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.6;
	color: #FFFFFF;
	text-align: center;
	margin-bottom: 0;
}

/* White right block: canvas top:158, left:259 → relative to strip: top:10, left:229
   width:801, height:97 */
.bo-nav-right {
	position: relative;
	flex-grow: 1;
	margin-right: 10px;
	height: 97px;
	background-color: #FFFFFF;
	flex-shrink: 0;
	flex-shrink: 1;
	max-width: 100%;
	display: flex;
	align-items: flex-start;
	padding-left: 54px;
	padding-top: 21px;
	box-sizing: border-box;
}

/* Tabs: canvas top:179 → relative to white block: top:179-158=21 */
.bo-tab {
	height: 53px;
	display: flex;
	align-items: flex-start;
}


/* Tab body: 76x53, bg:#1C7245 + icon (cover) */
.bo-tab-body {
	position: relative;
	width: 76px;
	height: 53px;
	background-color: #1C7245;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left top;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Tab arrow decoration: 30x53 */
.bo-tab-arrow {
	width: 30px;
	height: 53px;
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center center;
	flex-shrink: 0;
	margin-right: -3px;
}

/* Single-line tab text */
.bo-tab-text-single {
	position: relative;
	width: 76px;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.6;
	color: #FFFFFF;
	text-align: center;
	margin: 0;
}

/* Two-line tab text */
.bo-tab-text-double {
	position: relative;
	width: 76px;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.2;
	color: #FFFFFF;
	text-align: center;
	margin: 0;
}

/* ==============================================
   Section 2 — STEP Cards (01~07)
   canvas ref: top 265~2150, width 1100px
   cards at left:30, width:1066, height:227
   gap between cards: 25px (252-227)
============================================== */
.bo-section2 {
	width: 100%;
	max-width: 1100px;
	margin: 53px auto 0;
	/* 318-265=53px gap from section 1 */
	padding: 0 30px;
	box-sizing: border-box;
}

/* Card wrapper: matches original 1066×227 container */
.bo-step-card {
	position: relative;
	width: 100%;
	min-height: 227px;
	margin-bottom: 25px;
	background-color: #FFFFFF;
	border: 3px solid #E7E7E7;
	box-sizing: border-box;
	display: flex;
	padding: 10px;
}

/* Gray left square: 200×200, bg:#F0F0F0 */
.bo-step-gray {
	position: relative;
	width: 200px;
	min-height: 200px;
	background-color: #F0F0F0;
	border: 1px solid #E7E7E7;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	box-sizing: border-box;
}

.bo-step-body {
	position: relative;
	flex-grow: 1;
	margin-left: 19px;
	/* Edge to body: 3(border) + 10(padding) + 200(gray) + 19 = 232px */
	display: flex;
	gap: 24px;
	padding-top: 23px;
}

.bo-step-left {
	position: relative;
	flex: 1;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.bo-step-right {
	position: relative;
	flex: 1;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

/* Circle icon: 80×80, border-radius:50% */
.bo-step-circle {
	position: relative;
	width: 80px;
	height: 80px;
	margin: 0;
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center center;
	border-radius: 50%;
}

/* STEP number */
.bo-step-num {
	position: relative;
	width: 200px;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -1px;
	line-height: 1.6;
	text-align: center;
	margin: 0;
}

.bo-step-num .bo-step-word {
	color: #333333;
}

/* Step label */
.bo-step-label {
	position: relative;
	width: 200px;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.6;
	color: #333333;
	text-align: center;
	margin: 10px auto 0;
}

/* Title row: img + title flex */
.bo-title-row {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

/* Title bar img */
.bo-title-bar {
	position: relative;
	width: 14px;
	display: block;
	flex-shrink: 0;
	margin-top: 9px;
}

/* Main title */
.bo-step-main-title {
	position: relative;
	width: 100%;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.6;
	color: #333333;
	text-align: left;
	margin: 0;
}

/* Description */
.bo-step-desc {
	position: relative;
	width: 100%;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.6;
	color: #333333;
	text-align: left;
	margin: 0;
}

/* Check row: img + title flex */
.bo-check-row {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

/* Check bar img */
.bo-check-bar {
	position: relative;
	width: 14px;
	display: block;
	flex-shrink: 0;
	margin-top: 4px;
}

/* "Check Pointe" title */
.bo-check-title {
	position: relative;
	width: 100%;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.6;
	color: #BB0021;
	text-align: left;
	margin: 0;
}

/* Check description */
.bo-check-desc {
	position: relative;
	width: 100%;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.6;
	color: #333333;
	text-align: left;
	margin: 0;
}

/* Red highlight for "Check" text in check descriptions */
.bo-check-desc .bo-red {
	color: #BB0021;
}

/* Bullet rows for · list items */
.bo-bullet-row {
	display: flex;
	gap: 4px;
	align-items: flex-start;
}

.bo-bullet {
	flex-shrink: 0;
	line-height: 1.6;
}

/* Responsive: 1200px */
@media screen and (max-width: 1100px) {

	.bo-section1,
	.bo-section2 {
		padding-left: 0;
		padding-right: 0;
	}

	.bo-header-top {
		padding-left: 20px;
		padding-right: 20px;
	}

	.bo-intro-title {
		width: 100%;
	}

	.bo-deco-wrap,
	.bo-nav-strip {
		display: none;
	}
}

/* Responsive: 800px */
@media screen and (max-width: 800px) {
	.bo-header-top {
		height: auto;
		padding-bottom: 20px;
	}

	.bo-nav-strip {
		height: auto;
		flex-wrap: wrap;
	}

	.bo-nav-left {
		width: 100%;
		height: auto;
		padding: 10px 0;
	}

	.bo-nav-right {
		width: 100%;
		height: auto;
		flex-wrap: wrap;
		padding: 10px;
	}

	.bo-tab {
		height: auto;
		flex-wrap: wrap;
	}

	.bo-step-card {
		flex-direction: column;
	}

	.bo-step-gray {
		width: 100%;
		height: auto;
		padding: 20px;
	}

	.bo-step-body {
		margin-left: 0;
		flex-direction: column;
	}

	.bo-step-left {
		width: 100%;
	}
}