@charset "utf-8";
/* ==========================================================================
   후원신청 / 재능기부신청 전용 스타일
   2026-08-24
   색상: 네이비 #1D2172 / 골드 #f7b603 / 오렌지 #f37321 (사이트 기본 팔레트)
   ========================================================================== */

/* ---------- 서브 비주얼 (단색형) ---------- */
.support_visual{background:#1D2172 !important; background-image:none !important; text-align:left; height:440px !important;}
.support_visual .fp-tableCell{height:440px !important;}
.support_visual .txt_box{max-width:1400px; text-align:left; transform:translate(-50%, calc(-50% + 18px)); -webkit-transform:translate(-50%, calc(-50% + 18px)); -moz-transform:translate(-50%, calc(-50% + 18px)); -ms-transform:translate(-50%, calc(-50% + 18px)); -o-transform:translate(-50%, calc(-50% + 18px));}
.support_visual .txt_box h2{font-size:48px; color:#fff; font-weight:600; letter-spacing:-0.04em; margin:0; opacity:1 !important; animation:none !important;}
.support_visual .txt_box p{margin-top:12px; font-size:18px; color:#fff; font-weight:300; letter-spacing:-0.04em; word-break:keep-all;}
.support_visual .txt_box p b{color:#f7b603; font-weight:500;}

@media all and (max-width:1000px){
	.support_visual .txt_box{transform:translate(-50%, calc(-50% + 12px)); -webkit-transform:translate(-50%, calc(-50% + 12px)); -moz-transform:translate(-50%, calc(-50% + 12px)); -ms-transform:translate(-50%, calc(-50% + 12px)); -o-transform:translate(-50%, calc(-50% + 12px));}
	.support_visual .txt_box h2{font-size:32px;}
	.support_visual .txt_box p{font-size:16px;}
}

/* ---------- 폼 영역 공통 ---------- */
.support_con{padding:80px 0 100px;}
.support_con .inner{width:96%; max-width:1000px; margin:0 auto;}

.support_form_head{overflow:hidden; margin-bottom:26px;}
/* 후원신청방법 안내 */
.support_form_head .how_box{float:left; padding-top:2px;}
.support_form_head .how_box h4{font-size:19px; color:#f37321; font-weight:600; letter-spacing:-0.04em; margin:0 0 6px;}
.support_form_head .how_box p{font-size:16px; color:#222; font-weight:500; letter-spacing:-0.04em; line-height:1.6; word-break:keep-all;}
.support_form_head .down_box{float:right; display:flex; flex-direction:column; align-items:center; gap:10px;}
.support_form_head .down_box .name{font-size:17px; color:#222; font-weight:500; letter-spacing:-0.04em; white-space:nowrap;}
.support_form_head .down_box .btn_down{display:inline-block; padding:12px 34px; background:#f37321; border-radius:30px; font-size:17px; color:#fff; font-weight:500; letter-spacing:-0.04em;}
.support_form_head .down_box .btn_down:hover{background:#e05f0d;}

/* 행 */
.sp_row{display:flex; align-items:flex-start; padding:9px 0; flex-wrap:wrap;}
.sp_row > .sp_label{width:130px; flex:0 0 130px; padding-top:9px; font-size:17px; color:#222; font-weight:500; letter-spacing:0.08em;}
.sp_row > .sp_label .req{color:#f37321; font-weight:700;}
/* .sp_field 내부에 두 번째 라벨을 둘 때 (예: 연락처 옆 이메일) */
.sp_label_in{font-size:17px; color:#222; font-weight:500; letter-spacing:0.08em; white-space:nowrap; padding-left:20px;}
.sp_label_in .req{color:#f37321; font-weight:700;}
.sp_label_in.no_pad{padding-left:0;}

.sp_row > .sp_field{flex:1 1 auto; min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px;}

/* 입력요소 */
.sp_field input[type=text],
.sp_field input[type=tel],
.sp_field input[type=email],
.sp_field input[type=number],
.sp_field select,
.sp_field textarea{
	border:0; border-bottom:1px dashed #9a9a9a; background:transparent;
	padding:8px 6px; font-size:16px; color:#222; letter-spacing:-0.02em;
	font-family:inherit; box-sizing:border-box;
}
.sp_field select{border:1px solid #cfcfcf; border-radius:3px; background:#fff; padding:8px 10px; min-width:170px;}
.sp_field textarea{border:1px dashed #9a9a9a; width:100%; min-height:280px; padding:14px; resize:vertical; line-height:1.6;}
.sp_field input:focus, .sp_field select:focus, .sp_field textarea:focus{outline:none; border-color:#1D2172;}

.sp_w_s{width:170px;}
.sp_w_m{width:300px;}
.sp_w_l{width:100%; max-width:640px;}
.sp_full{width:100%;}

/* 주소 (다음 우편번호 API) */
.addr_line{display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap;}
.addr_line:last-child{margin-bottom:0;}
.addr_line input[readonly]{background:#fafafa; cursor:pointer;}
a.btn_zip{display:inline-block; padding:9px 20px; background:#1D2172; border-radius:3px; font-size:15px; color:#fff; font-weight:500; letter-spacing:-0.04em; white-space:nowrap;}
a.btn_zip:hover{background:#2a2a86; color:#fff;}

/* 라디오 / 체크박스 */
.sp_opt{display:inline-flex; align-items:center; gap:8px; margin-right:26px; font-size:17px; color:#222; letter-spacing:0.02em; cursor:pointer;}
.sp_opt input{width:18px; height:18px; accent-color:#1D2172; cursor:pointer;}

/* 후원금액 2줄 */
.sp_amount_row{display:flex; align-items:center; gap:16px; padding:6px 0; flex-wrap:wrap;}
.sp_amount_row .amt_name{width:110px; flex:0 0 110px; font-size:17px; color:#222;}

/* ---------- CMS 출금이체 박스 ---------- */
.cms_box{margin:34px 0; padding:34px 40px; background:#fdf6e6; border-radius:4px;}
.cms_box .cms_head{display:flex; align-items:baseline; gap:10px; margin-bottom:22px; flex-wrap:wrap;}
.cms_box .cms_head h4{font-size:21px; color:#1D2172; font-weight:600;}
/* 시안: CMS 글자만 빨간색 + 밑줄 */
.cms_box .cms_head h4 em{font-style:normal; color:#e02b2b; font-weight:700; border-bottom:2px solid #e02b2b; padding-bottom:1px;}
.cms_box .cms_head span{font-size:15px; color:#666; letter-spacing:-0.04em;}
/* 시안 요청: 안내문구 빨간색 */
.cms_box .cms_notice{display:inline-block; padding:8px 14px; border:1px dashed #d94b4b; font-size:15px; color:#e02b2b; font-weight:500; letter-spacing:-0.04em;}
/* 시안: 생년월일 칸 자체가 빨간 테두리 + 빨간 안내문구 */
/* flex 아이템에 width:100% 를 주면 한 줄을 다 차지해 다음 줄로 밀려난다. flex-basis 로 지정. */
/* [라벨 130] [1차입력 230] [2차라벨 70] [2차입력 나머지] - 세 행의 열이 정확히 맞는다 */
.cms_box .cms_row{display:grid; grid-template-columns:130px 230px 70px minmax(0, 1fr); align-items:center; column-gap:14px; padding:9px 0;}
.cms_box .cms_row > .cms_lb{font-size:17px; color:#222; font-weight:500; letter-spacing:0.08em; white-space:nowrap;}
.cms_box .cms_row > .cms_lb2{font-size:17px; color:#222; font-weight:500; letter-spacing:0.08em; white-space:nowrap; text-align:center;}
.cms_box .cms_row > input{width:100%; border:0; border-bottom:1px dashed #9a9a9a; background:transparent; padding:8px 6px; font-size:16px; color:#222; font-family:inherit; box-sizing:border-box;}
.cms_box .cms_row > input:focus{outline:none; border-color:#1D2172;}
.cms_box .cms_row > .cms_wide{grid-column:2 / -1; display:flex; align-items:center; flex-wrap:wrap; gap:8px 0;}
.cms_box .cms_row > .cms_wide input[type=text]{border:0; border-bottom:1px dashed #9a9a9a; background:transparent; padding:8px 6px; font-size:16px; font-family:inherit;}

/* 생년월일 칸: 시안처럼 빨간 점선 테두리 + 빨간 안내문구 */
.cms_box input.birth_input{border:1px dashed #d94b4b !important; padding:9px 12px !important; color:#222;}
.cms_box input.birth_input::-webkit-input-placeholder{color:#e02b2b; font-weight:500;}
.cms_box input.birth_input::-moz-placeholder{color:#e02b2b; font-weight:500; opacity:1;}
.cms_box input.birth_input:-ms-input-placeholder{color:#e02b2b; font-weight:500;}
.cms_box input.birth_input::placeholder{color:#e02b2b; font-weight:500;}

/* ---------- 동의 영역 ---------- */
.agree_block{margin:30px 0;}
.agree_block .agree_head{display:flex; align-items:center; gap:26px; margin-bottom:12px; flex-wrap:wrap;}
.agree_block .agree_head h4{font-size:17px; color:#222; font-weight:500; border-bottom:1px solid #222; padding-bottom:2px;}
.agree_block .agree_head h4 .req{color:#f37321;}
.agree_block .agree_txt{padding:20px 24px; background:#f5f5f5; font-size:14px; color:#666; line-height:1.9; letter-spacing:-0.04em; word-break:keep-all;}

/* ---------- 약속 / 제출 ---------- */
.promise_box{margin:50px 0 0; text-align:center;}
.promise_box .promise_txt{font-size:19px; color:#222; font-weight:500; letter-spacing:-0.04em; margin-bottom:28px;}
.promise_box .date_line{display:flex; justify-content:center; align-items:center; gap:8px; margin-bottom:22px; flex-wrap:wrap;}
.promise_box .date_line input{width:80px; text-align:center; border:1px dashed #9a9a9a; padding:8px 4px; font-size:16px;}
.promise_box .date_line span{font-size:17px; color:#222;}
/* 두 행의 라벨/입력칸 열을 맞추기 위해 그리드 사용.
   행마다 center 정렬하면 memo 가 있는 행만 폭이 넓어져 라인이 어긋난다. */
.promise_box .sign_wrap{display:inline-block; text-align:left;}
.promise_box .sign_line{display:grid; grid-template-columns:86px 190px auto; align-items:center; column-gap:10px; margin-bottom:10px;}
.promise_box .sign_line .sign_label{text-align:right; font-size:17px; color:#222; white-space:nowrap;}
.promise_box .sign_line .sign_label .req{color:#f37321;}
.promise_box .sign_line input{width:190px; border:1px dashed #9a9a9a; padding:8px 10px; font-size:16px; box-sizing:border-box;}
.promise_box .sign_line .memo{font-size:13px; color:#999; letter-spacing:-0.04em; white-space:nowrap;}

.sp_submit{margin-top:46px; text-align:center;}
.sp_submit button{min-width:200px; padding:20px 40px; background:#1D2172; border:0; border-radius:6px; font-size:22px; color:#fff; font-weight:600; letter-spacing:-0.04em; cursor:pointer; font-family:inherit;}
.sp_submit button:hover{background:#2a2a86;}

/* ---------- 하단 후원계좌 안내 ---------- */
.account_info{margin-top:90px; padding:60px 0; background:#f2f2f2;}
.account_info .inner{width:96%; max-width:1000px; margin:0 auto;}
.account_info dl{display:flex; padding:12px 0; flex-wrap:wrap;}
.account_info dl dt{width:150px; flex:0 0 150px; font-size:17px; color:#1D2172; font-weight:600;}
.account_info dl dt em{font-style:normal; color:#e02b2b; font-weight:700; border-bottom:2px solid #e02b2b; padding-bottom:1px;}
.account_info dl dd{flex:1 1 auto; min-width:0; font-size:16px; color:#333; line-height:1.9; letter-spacing:-0.02em; word-break:keep-all;}
.account_info dl dd .ov_row{display:flex; flex-wrap:wrap;}
.account_info dl dd .ov_row .k{width:170px; flex:0 0 170px; color:#666;}
.account_info dl dd .ov_row .v{flex:1 1 auto; min-width:0;}

@media all and (max-width:1000px){
	.support_con{padding:50px 0 60px;}
	.sp_row{display:block;}
	.sp_row > .sp_label{width:auto; padding:0 0 6px;}
	.sp_w_m, .sp_w_s{width:100%;}
	.cms_box{padding:24px 20px;}
	.cms_box .cms_row{display:block; padding:8px 0;}
	.cms_box .cms_row > .cms_lb{display:block; margin-bottom:6px;}
	.cms_box .cms_row > .cms_lb2{display:block; margin:10px 0 6px; text-align:left;}
	.cms_box .cms_row > .cms_wide{display:flex;}
	.support_form_head .how_box{float:none; margin-bottom:16px;}
	.support_form_head .how_box h4{font-size:17px;}
	.support_form_head .how_box p{font-size:15px;}
	.support_form_head .down_box{float:none; justify-content:flex-start;}
	.account_info{padding:40px 0;}
	.account_info dl{display:block;}
	.account_info dl dt{width:auto; margin-bottom:6px;}
	.account_info dl dd .ov_row .k{width:130px; flex:0 0 130px;}
	.promise_box .sign_line .sign_label{width:auto;}
}