/*
	온라인 창업 상담(startup-consult-iacf) 전용 스타일.

	스코프는 화면 루트 클래스(.sc-agree / .sc-write / .signup-wrap)를 쓴다.
	코어가 붙이는 게시판 유형 클래스(.startup-consult-iacf)는 listLayout·viewLayout·writeLayout 을 거치는
	모드에만 생겨, layout 을 직접 지정한 agree·completed 에는 없기 때문이다.
	목록은 정본(common01-04.css)이 의미별 col 클래스에 폭을 걸어둬 여기서 손댈 것이 없고,
	상세는 가족회사 교육신청(education-course-anchor/view/view.jsp)과 같이 스킨에 인라인으로 둔다.
	레이아웃·폼·버튼·테이블의 기본 규격은 퍼블 정본(iacf.css → board.css · iacf-etc.css · common01-04.css)이
	담당하므로 여기서 공용 클래스를 재정의하지 않는다. 퍼블에 정의가 없거나 게시판 페이지에 실리지 않는 것만 둔다.
*/

/* ── 스텝 공통 ──────────────────────────────────────────── */
/* 스텝바 연결선은 퍼블 정본(iacf-etc.css)이 4단계 기준 고정값(width:100px / right:-120px)이다.
   컨테이너는 max-width:660px + space-between 이라 3단계에서는 아이콘 간격이 벌어져 선 오른쪽에 공백이 남는다.
   정본과 같은 여백 비율(아이콘 20px / 다음 아이콘 15px)이 되도록 선만 간격에 맞춰 늘린다.
   모바일(≤1024px)은 정본이 :after 를 숨기고 wrap 에 가로선을 깔므로 여기서 건드리지 않는다.
   값은 업무협약신청(ba-step-bar) 3단계와 같은 실측값이다. */
@media ( min-width: 1025px ) {
	.signup-box .sign-top .step-bar-wrap.sc-step-bar .step-item .step-icon:after {
		width: 198px;
		right: -218px;
	}
}

/* 퍼블 정본(.signup-box .sign-bot .action-area a)은 a 만 스타일한다.
   이 게시판은 동의값·신청값을 POST 해야 해서 다음 단계가 submit 버튼이므로 같은 모양을 준다. */
.signup-box .sign-bot .action-area button.btn-next-step {
	padding: 17px 24px;
	border: 0;
	border-radius: 100px;
	display: inline-flex;
	gap: 12px;
	align-items: center;
	position: relative;
	background: #003B90;
	font-family: inherit;
	font-weight: 600;
	font-size: 18px;
	line-height: 100%;
	letter-spacing: 0;
	text-align: center;
	vertical-align: middle;
	color: #fff;
	cursor: pointer;
}

.signup-box .sign-bot .action-area button.btn-next-step:after {
	content: "";
	display: inline-block;
	background: url(/_res/nsu/_share/img/iacf/ico-input.png) no-repeat center center;
	width: 20px;
	height: 20px;
}

/* ── STEP 1 약관 동의(agree) ────────────────────────────── */
/* 마지막 약관 아래 여백은 action-area 가 갖는다. */
.sc-agree .agree-section.no-mg {
	margin-bottom: 0;
}

/* 약관 본문 위 버전·시행일 줄. 퍼블에는 없는 요소라 본문과 구분되게만 둔다. */
.sc-agree .terms-box .terms-head-date {
	margin: 0 0 8px;
	font-size: 13px;
	color: #999;
}

/* ── STEP 2 신청 정보 입력(write) ───────────────────────── */
/* 입력칸 폭 통일.
   퍼블 정본(reservation-step03)은 값 칸의 컨트롤이 칸 전체 폭을 채우고, 여러 개가 들어가는 칸은
   phone-inputs 처럼 한 줄 flex 로 같은 폭씩 나눠 갖는다(정본 실측: 값 칸 531px, 전화 3칸 각 164px).
   반면 board.css 는 전화·이메일 칸에 33.33% / max-width 200px 를, iacf.css 는 phone-inputs 에 360px 를
   걸어둬 묶음마다 폭이 제각각이 된다. 정본 규칙 쪽으로 통일한다 —
   묶음은 칸 전체 폭을 쓰는 한 줄 flex, 그 안의 컨트롤은 균등 분할. */
.sc-write .b-tel-box.phone-inputs,
.sc-write .sc-email,
.sc-write .b-date-box {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	max-width: none;
}

.sc-write .b-tel-box.phone-inputs .b-input,
.sc-write .b-tel-box.phone-inputs .b-select,
.sc-write .sc-email .b-input,
.sc-write .sc-email .b-select,
.sc-write .b-date-box .b-input,
.sc-write .b-date-box .b-select {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	max-width: none;
}

/* 구분 기호(- · @)는 폭을 갖지 않는다 */
.sc-write .b-tel-box.phone-inputs > span,
.sc-write .sc-email > span {
	flex: none;
	padding: 0;
	color: #767676;
}

/* 이메일 변경 불가 안내(수정 모드)는 입력 줄 아래로 내린다 */
.sc-write .sc-email .b-guide-txt {
	flex: 1 0 100%;
	margin: 0;
}

/* 모바일은 값 칸이 화면 폭까지 좁아진다. 컨트롤이 3개 이상인 묶음만 마지막 하나를 아랫줄로 내린다 */
@media ( max-width: 768px ) {
	.sc-write .sc-email,
	.sc-write .b-date-box {
		flex-wrap: wrap;
	}

	.sc-write .sc-email .b-select,
	.sc-write .b-date-box .b-input.datepicker {
		flex: 1 0 100%;
	}
}

/* 공용 .bn-write-common01 .b-input 의 height(40px)가 함께 선언된 .b-textarea 를 눌러 한 줄이 되므로
   상담 내용 입력칸의 높이를 지정한다. */
.sc-write .b-input.b-textarea {
	height: 240px;
}

/* 필수 안내(정본 txt-board)는 표 바로 아래에 붙으므로 위 여백만 준다. */
.sc-write .sc-required-note {
	margin-top: 15px;
}

/* ── STEP 3 신청 완료(completed) ────────────────────────── */
/* 퍼블 정본(box-final)에는 tit 아래 설명문 규격이 없어 교육신청·업무협약 완료 화면과 같은 값을 준다 */
.signup-wrap .box-final .con-final-desc {
	margin: 0 0 30px;
	font-size: 18px;
	line-height: 140%;
	text-align: center;
	color: #767676;
}