/************************
        상담폼 
*************************/

/* 줄바꿈 방지 */
.option-item{
	white-space:nowrap;
}

/* 섹션 */
.form-section {
	padding:50px 20px;
	text-align:center;
	background:#f5f5f5;
	border-top:1px solid #e0e6ed;
	border-bottom:1px solid #d6e2ec;
}

.req{
	color:#e53935; 
	margin-left:2px;
}

.form-wrap{
	max-width:1000px;
	margin:0 auto;
}

/* 타이틀 */
.form-section h2{
	font-size:28px;
	font-weight:700;
	color:#2c6fa3;
	letter-spacing:-0.5px;

	position:relative;
	display:inline-block;
	padding-bottom:12px;
	margin-bottom:30px;
}

.form-section h2::after{
	content:'';
	position:absolute;
	left:0;                
	bottom:0;
	width:100%;           
	height:3px;
	background:linear-gradient(90deg, #2c6fa3, #5aa3e6);
	border-radius:2px;
}

/* 그리드 */
.form-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px;
}

/* 그룹 */
.form-group{
	display:flex;
	flex-direction:column;
	text-align:left;
}

.form-group.full{
	grid-column:1 / -1;
}

.form-group label{	
	font-size:14px;
	margin-bottom:10px;
	font-weight:bold;
	color:#666;
	letter-spacing:-0.2px;
}

/* input */
.form-group input{
	width:100%;
	font-size:16px; 
	height:52px;
	padding:0 14px;
	box-sizing:border-box;
	border:1px solid #ddd; 
	outline:none;
	border-radius:6px;
}

.form-group input:focus{
	border:2px solid #2c6fa3;
	background:#eef5fb;           /* 🔥 핵심 */
	box-shadow:0 0 0 1px rgba(44,111,163,0.2);
}

/* =====================
   옵션 버튼 (공통)
===================== */

/* 기본 3열 */
.option-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:10px;
}

/* 2열 */
.option-grid.two{
	grid-template-columns:repeat(2,1fr);
}

/* 버튼 */
.option-item{
	height:52px;
	width:100%;

	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;

	padding:0 12px; 
	box-sizing:border-box;

	border:1px solid #ddd;
	background:#fff;
	border-radius:6px;

	cursor:pointer;
	color:#555;

	position:relative;
}

/* radio 숨김 */
.option-item input{
	position:absolute;
	opacity:0;
	pointer-events:none;
}

/* 체크 아이콘 */
.check-icon{
	width:14px;
	height:14px;
	border-radius:50%;
	background:#cfcfcf;
	position:relative;
	flex-shrink:0;
}

.check-icon::after{
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	width:4px;
	height:8px;
	border:2px solid #fff;
	border-top:none;
	border-left:none;
	transform:translate(-50%,-60%) rotate(45deg);
}

/* 선택 상태 */
.option-item input:checked + .check-icon{
	background:#2c6fa3;
}

.option-item input:checked ~ *{
	color:#2c6fa3;
}

.option-item:has(input:checked){
	border:2px solid #2c6fa3;
	background:#eef5fb;
	color:#2c6fa3;
}

/* =====================
   근로형태 (PC)
===================== */
.option-grid.job{
	display:flex;
	gap:10px;
}
.option-grid.job .option-item:nth-child(3){
	margin-right:10px;   /* 3,4 번 사이 중앙 간격 넓히기 */
}
.option-grid.job .option-item{
	flex:1 1 0;        /* 핵심 (균등 분배 완전 고정) */
	min-width:0;       /* 텍스트 영향 제거 */
	height:52px;

	display:flex;
	align-items:center;
	justify-content:center;

	box-sizing:border-box;
}
/* =====================
   개인정보
===================== */
.agree-right{
	grid-column:2;
	display:flex;
	align-items:center;
	padding-top:50px;
}

.agree{
	display:flex;
	align-items:center;
	gap:6px;
	font-size:14px;
	white-space:nowrap;
}

.agree input[type="checkbox"]{
	width:16px;
	height:16px;
	margin:0;
	margin-right:4px;
}

/* =====================
   개인정보 (자가차량신카 주석했을경우엔 이거로 사용)
===================== */
.agree-right2{
	grid-column:2;
	display:flex;
	align-items:center;
}

.agree2{
	display:flex;
	align-items:center;
	gap:6px;
	font-size:14px;
	white-space:nowrap;
}

.agree2 input[type="checkbox"]{
	width:16px;
	height:16px;
	margin:0;
	margin-right:4px;
}

/* =====================
   버튼
===================== */
.submit-row{
	grid-column:1 / -1;
}

.submit-btn{
	width:100%;
	padding:15px;

	background:linear-gradient(135deg, #2c6fa3, #3f86c6);
	color:#fff;

	border:none;
	border-radius:8px;

	font-size:18px;
	font-weight:600;

	cursor:pointer;

	transition:background 0.25s ease, box-shadow 0.2s ease;
}

.submit-btn:hover{
	background:linear-gradient(135deg, #3f86c6, #5aa3e6);
	box-shadow:0 6px 15px rgba(44,111,163,0.25);
}

.submit-btn:active{
	background:linear-gradient(135deg, #255d8a, #2c6fa3);
	box-shadow:0 2px 6px rgba(0,0,0,0.2);
}

/* 옵션 위 간격 */
.card-left .option-grid{
	margin-top:10px;
}

/* 포커스 + 값 있을 때 동일 스타일 */
.form-group input.active,
.form-group input:focus{
	border:2px solid #2c6fa3;
	background:#eef5fb;
}

/************************
        상담폼 END
*************************/
/* =====================
   모바일
===================== */
@media(max-width:768px){



	.option-grid.job{
		display:grid;
		grid-template-columns:repeat(3,1fr); /* 🔥 3열 */
		gap:8px;
	}

	/* 모든 버튼 동일 기준 */
	.option-item{
		height:44px;
		padding:0 12px;     /* 🔥 다시 통일 */
		font-size:13px;     /* 🔥 통일 */
	}

	/* 근로형태도 동일하게 */
	.option-grid.job .option-item{
		height:52px;
		padding:0 12px;     /* 🔥 핵심 (6px → 12px로) */
		font-size:13px;     /* 🔥 핵심 */
		
		display:flex;
		align-items:center;
		justify-content:center;

		box-sizing:border-box;

		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}

	.form-section {
		padding:5px 20px;
	}

	.form-section h2{
		font-size:17px;
		padding-bottom:8px;
		margin-bottom:10px;
	}

	.form-section h2::after{
		height:2px;
	}

	.form-grid{
		grid-template-columns:1fr;
	}

	.option-grid{
		grid-template-columns:1fr 1fr;
		gap:6px;                      /* 간격 줄이기 */
	}

	.option-grid.job{
		display:grid;
		grid-template-columns:repeat(3,1fr);
		gap:10px;
	}

	.agree-right{
		grid-column:1;
		padding-top:0; 
		margin-top:-5px; 
	}

	.agree{
		display:flex;
		align-items:center;
		gap:2px;   /* 거의 붙이기 */
	}

	.agree input[type="checkbox"]{
		width:auto !important;
		height:auto !important;
		padding:0 !important;

	}
}
/************************
        상담폼 END
*************************/