@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-area: #F4F8FB;
	/*공통 색상*/
	--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-main-intro1: #FFFFFF;
	--color-main-intro2: #F4F4F4;
	--color-main-apply: #FEE500;
	/*폰트 색상*/
	--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; 
}

input[type="number"] {
    text-align: right;
}

input[type="month"] {
	min-width: 110px;
	font-size: 12px;
}

input:not([type="number"]):not([type="month"]) {
    text-align: left;
}

/*헤더*/
.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.error,
.sub-form-row.error
 {
    border: 2px solid var(--color-red) !important;
    padding: 10px;
    border-radius: 8px;
}

.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-div {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}

.form-desc {
	font-size: 12px;
	color: var(--color-text-muted);
	margin-bottom: 8px;
}

.form-unt-text {
	font-size: 13px;
	color: var(--color-text-muted);
	
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
}

.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-select {
	width: 100%;
	font-size: 12px;
	padding: 6px 4px;
}

.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;	
}

/*외부 가이드*/
.form-external-guide {
	margin: 10px;
	padding: 10px 12px;
	background: var(--color-white);
	border-radius: var(--radius-sm);
	border: 1px solid #E0E0E0;
	font-size: 12px;
	color: var(--color-text-muted);
	line-height: 1.7;
}

.form-external-guide > strong {
	color: var(--color-checked);
}

/*확인사항*/
.form-notice-label {
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
	text-align: left;
	margin-bottom: 20px;
}

.form-notice-label > input[type="checkbox"] {
	margin-top: 3px;
	accent-color: var(--color-checked);
	width: 16px;
	height: 16px;
}

/*라디오/체크박스*/
.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); 
}

.check-btn input[type="checkbox"],
.radio-btn input[type="radio"],
.radio-btn-s input[type="radio"] { 
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/*버튼*/
.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;
}

.req {
    color: var(--color-red);
}

.file-label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	border: 2px dashed #E0E0E0;
	border-radius: var(--radius-sm);
	cursor: pointer;
	background: var(--color-white);
}

.file-name {
	margin-top: 8px;
	font-size: 13px;
	color: var(--color-success);
	display: none;
}

.file-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-checked);
}

.file-desc {
	font-size: 12px;
	color: var(--color-text-muted);
	display: block;
	margin-top: 2px;
}

/*모바일 사이즈*/
@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; 
	}
}