@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&family=Noto+Serif+KR:wght@400;600;700&display=swap");

:root {
	--color-success: #2E7D4F;
	--color-success-light: #E8F5EE;
	--color-warning: #B8860B;
	--color-warning-light: #FFF8DC;
	--color-danger: #B83232;
	/*공통 색상*/
	--color-background: #FAFAFA;
	--color-border: #E0E0E0;
	--color-red: #F56179;
	--color-white: #FFFFFF;
	--color-checked: #1E1E1E;
	--color-checked-light: #333333;
	--color-checked-pale: #F7F7F0;
	--color-accent: #FF1900;
	--color-accent-light: #FCAEAA;
    --color-blue: #006CB7;
	/*사업별 색상*/
	--color-biz-main: #FFE300;
	/*단계별 회색*/
	--color-gray-50: #FAFAFA;
	--color-gray-100: #F5F5F5;
	--color-gray-200: #E8E8E8;
	--color-gray-300: #CCCCCC;
	--color-gray-400: #A3A3A3;
	--color-gray-500: #666666;
	--color-gray-700: #333333;
	--color-gray-900: #1E1E1E;
	/*폰트 색상*/
	--color-text: #1E1E1E;
	--color-text-muted: #666666;
	/*모서리*/
	--radius: 10px;
	--radius-sm: 6px;
	/*그림자*/
	--shadow: 0 4px 16px rgba(0,0,0,.08);
	--shadow-sm: 0 1px 4px rgba(0,0,0,.06);
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0; 
	padding: 0;
}

html {
    width: 100%;
    height: 100%;
}

body {
	font-family: 'Noto Sans KR', sans-serif; 
	background: var(--color-background); 
	color: var(--color-text); 
	min-height: 100vh; 
	font-size: 15px; 
	line-height: 1.6; 
}

.main { 
	max-width: 900px; 
	margin: 0 auto; 
	padding: 32px 24px 120px; 
}

/*헤더*/
.site-header {
	background: var(--color-white); 
	border-bottom: 1px solid var(--color-border); 
	padding: 0 24px; 
	position: sticky; 
	top: 0; 
	z-index: 100; 
	box-shadow: var(--shadow-sm); 
}

.header-inner {
	max-width: 900px; 
	margin: 0 auto; 
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	height: 100px; 
}

.logo { 
	display: flex; 
	align-items: center; 
	gap: 10px; 
}

.logo-img {
    height: 60px;
    width: 240px;
    background-image: url(../images/logo_social_solidarity_bank.png);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 40px;
}

.logo-text {
	font-size: 20px; 
	font-weight: 700; 
	color: var(--color-checked); 
}

/*진행바*/
.progress-wrap {
	background: var(--color-white); 
	border-bottom: 1px solid var(--color-border); 
	padding: 0 24px;
}

.progress-inner {
	max-width: 900px; 
	margin: 0 auto; 
	display: flex; 
	align-items: stretch; 
	padding: 16px 0; 
}

/*배너*/
.web_banner {
	max-width: 900px;
	width: 100%;
	margin: 0 auto; 
	display: flex; 
	align-items: stretch; 
}

.banner_img {
	max-width: 100%;
	height: auto;
	display: block;
}

/*step title*/
.card {
	background: var(--color-background); 
	border-radius: 14px; 
	border: 1px solid var(--border); 
	box-shadow: var(--shadow); 
	overflow: hidden; 
	margin-bottom: 20px; 
}

.card-header {
	padding: 20px 24px 16px; 
	border-bottom: 1px solid var(--color-gray-100); 
}

.card-title { 
	font-size: 16px; 
	font-weight: 700; 
	color: var(--color-gray-900); 
	display: flex; 
	align-items: center; 
	gap: 8px; 
}

.card-title .icon { 
	width: 28px; 
	height: 28px; 
	border-radius: 7px; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	font-size: 14px;
}

.card-desc { 
	font-size: 13px; 
	color: var(--color-text-muted); 
	margin-top: 4px;
}

.card-body {
	padding: 20px 24px; 
}

/*step row*/
.form-row {
	margin-bottom: 18px; 
}

.form-row > div.inline {
	display: flex;
	gap: 8px;
	align-items: center;
}

.form-label { 
	display: block; 
	font-size: 13px; 
	font-weight: 600; 
	color: var(--color-gray-700); 
	margin-bottom: 7px; 
}

.form-label.req::after {
	color: var(--color-accent); 
	content: " *";
	margin-left: 2px; 
}

.form-input, 
.form-select, 
.form-textarea {
	width: 100%; 
	padding: 11px 14px; 
	border: 1.5px solid var(--color-border); 
	border-radius: var(--radius-sm); 
	font-size: 14px; 
	font-family: inherit; 
	color: var(--color-text); 
	background: var(--color-white); 
}

.form-input:focus, 
.form-select:focus, 
.form-textarea:focus {
	outline: none; 
	border-color: var(--color-checked); 
	box-shadow: 0 0 0 3px rgba(59,30,84,.1); 
}

.form-textarea {
	min-height: 100px;
	resize: vertical;
	line-height: 1.7; 
}

/*입력형태별 css*/
/*주민등록번호*/
.form-input .ssn {
	width: 140px;
	text-align: center;
	letter-spacing: 2px;	
}

/*휴대폰번호*/
.form-input .phone {
	width: 110px;
	text-align: center;
	letter-spacing: 2px;	
}

/*라디오/체크박스*/
.radio-group,
.check-group { 
	display: flex; 
	flex-wrap: wrap; 
	gap: 8px; 
}

.radio-btn, 
.check-btn { 
	display: flex; 
	align-items: center; 
	gap: 8px; 
	padding: 9px 14px; 
	border: 1.5px solid var(--color-border); 
	border-radius: var(--radius-sm); 
	font-size: 13px; 
	cursor: pointer; 
	background: var(--color-background); 
	user-select: none;
}

.radio-btn-s { 
	display: flex; 
	align-items: center; 
	gap: 8px; 
	padding:6px 14px;
	border: 1.5px solid var(--color-border); 
	border-radius: var(--radius-sm); 
	font-size:12px; 
	cursor: pointer; 
	background: var(--color-background); 
	user-select: none;
}

.radio-btn:hover, 
.check-btn:hover,
.radio-btn-s:hover  { 
	border-color: var(--color-checked-light); 
	background: var(--color-checked-pale); 
}

.radio-btn.selected,
.check-btn.selected,
.radio-btn-s.selected { 
	border-color: var(--color-checked); 
	background: var(--color-checked-pale); 
	color: var(--color-checked); 
	font-weight: 600; 
}

.radio-dot, 
.check-mark { 
	width: 16px; 
	height: 16px; 
	border-radius: 50%; 
	border: 2px solid var(--color-gray-300); 
	flex-shrink: 0;
}

.radio-dot-s { 
	width: 14px; 
	height: 14px; 
	border-radius: 50%; 
	border: 2px solid var(--color-gray-300); 
	flex-shrink: 0;
}

.check-mark { 
	border-radius: 4px; 
}

.radio-btn.selected .radio-dot,
.radio-btn-s.selected .radio-dot-s { 
	border-color: var(--color-checked); 
	background: var(--color-checked); 
	box-shadow: inset 0 0 0 3px var(--color-white); 
}

.check-btn.selected .check-mark { 
	border-color: var(--color-checked); 
	background: var(--color-checked); 
}
.radio-btn input[type="radio"],
.radio-btn-s input[type="radio"] { 
	display: none; 
}

/*버튼*/
.btn {
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	padding: 13px 28px; 
	border-radius: var(--radius); 
	font-size: 15px; 
	font-weight: 600; 
	cursor: pointer; 
	border: none; 
	font-family: inherit; 
}

.btn-primary { 
	background: var(--color-checked); 
	color: #fff; 
	width: 100%; 
}

.btn-group {
		display: flex; 
		gap: 12px; 
		margin-top: 24px; 
}

.btn-back { 
	background: none; 
	border: 1.5px solid var(--color-gray-300); 
	color: var(--color-gray-500); 
	padding: 10px 20px; 
	border-radius: var(--radius); 
	font-size: 14px; 
	font-weight: 500; 
	cursor: pointer; 
	font-family: inherit; 
}
.btn-send { 
	background: var(--color-checked-pale); 
	color: var(--color-checked); 
	border: 1px solid var(--color-checked); 
	padding: 10px 18px; 
	border-radius: var(--radius-sm); 
	font-size: 13px; 
	font-weight: 600; 
	cursor: pointer; 
	white-space: nowrap; 
	font-family: inherit;
}

/*모바일 사이즈*/
@media (max-width: 640px) {
	
	.card-body {
		padding: 16px; 
	}
	
	/*라디오, 체크박스*/
	.radio-btn,
	.check-btn { 
		padding: 10px 12px; 
		font-size: 13px; 
		min-height: 42px; 
	}

	/*버튼*/
	.btn { 
		padding: 12px 20px; 
		font-size: 14px; 
	}
	
	.btn-group { 
		flex-direction: column; 
		gap: 10px; 
	}
	
	.btn-back {
		width: 100%; 
		text-align: center; 
	}
}