종원연대 가입하기

.join-wrap{
max-width:760px;
margin:0 auto;
padding:30px 16px 70px;
font-family:’Pretendard’,’Noto Sans KR’,sans-serif;
color:#13233f;
}

.join-card{
background:#fff;
border-radius:28px;
overflow:hidden;
box-shadow:0 14px 36px rgba(0,0,0,0.08);
border:1px solid #e5edf6;
}

.join-hero{
background:linear-gradient(135deg,#eaf6ff,#f7fbff);
padding:34px 28px;
display:flex;
align-items:center;
gap:18px;
}

.join-hero img{
width:72px;
height:72px;
border-radius:50%;
object-fit:cover;
background:#fff;
box-shadow:0 6px 18px rgba(0,0,0,0.12);
}

.join-hero h1{
margin:0;
font-size:42px;
font-weight:900;
letter-spacing:-1.5px;
}

.join-hero .red{
color:#e11d1d;
}

.join-form{
padding:30px 34px 36px;
}

.join-row{
display:grid;
grid-template-columns:80px 1fr 280px;
align-items:center;
gap:16px;
padding:18px 0;
border-bottom:1px solid #e5e7eb;
}

.join-num{
width:42px;
height:42px;
border-radius:50%;
background:#0b315f;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
font-weight:900;
}

.join-label{
font-size:21px;
font-weight:900;
line-height:1.45;
}

.join-input,
.join-select{
width:100%;
height:54px;
border:2px solid #d8dee8;
border-radius:12px;
padding:0 16px;
font-size:19px;
box-sizing:border-box;
background:#fff;
}

.join-help{
text-align:center;
font-size:20px;
line-height:1.6;
color:#444;
margin:26px 0 22px;
font-weight:700;
}

.join-submit{
width:100%;
height:68px;
border:0;
border-radius:12px;
background:linear-gradient(135deg,#062b55,#0b4d91);
color:#fff;
font-size:26px;
font-weight:900;
cursor:pointer;
box-shadow:0 10px 22px rgba(0,0,0,0.14);
}

.join-submit:disabled{
opacity:.55;
cursor:not-allowed;
}

.join-notice{
margin-top:24px;
background:#eef7ff;
border:1px solid #d7eaff;
border-radius:18px;
padding:20px;
display:flex;
gap:12px;
align-items:flex-start;
font-size:19px;
line-height:1.7;
color:#25364f;
}

.join-check{
min-width:34px;
height:34px;
border-radius:50%;
background:#2f80d0;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:900;
}

.join-result{
margin-top:18px;
padding:18px;
border-radius:14px;
text-align:center;
font-size:19px;
font-weight:900;
display:none;
}

.join-result.success{
display:block;
background:#ecfdf5;
color:#047857;
border:1px solid #a7f3d0;
}

.join-result.error{
display:block;
background:#fef2f2;
color:#b91c1c;
border:1px solid #fecaca;
}

@media(max-width:768px){
.join-wrap{
padding:20px 12px 50px;
}

.join-hero{
padding:28px 18px;
}

.join-hero img{
width:58px;
height:58px;
}

.join-hero h1{
font-size:30px;
}

.join-form{
padding:22px 18px 28px;
}

.join-row{
grid-template-columns:48px 1fr;
gap:12px;
}

.join-row .join-input,
.join-row .join-select{
grid-column:1 / 3;
}

.join-label{
font-size:18px;
}

.join-input,
.join-select{
height:52px;
font-size:17px;
}

.join-submit{
height:62px;
font-size:22px;
}

.join-help{
font-size:17px;
}

.join-notice{
font-size:16px;
}
}

종원연대 로고

종원연대 가입신청

1
평산신씨전첨공파종중 종원이십니까?

선택하세요
예
아니오

2
성명을 기입해 주세요.

3
생년월일을 기입해 주세요.

4
연락처를 기입해 주세요.

5
하위지파를 선택해 주세요.

선택하세요
경력공종중
평주부원군종중
진사공종중

정보를 모두 기입하셨다면, 아래의 가입 버튼을 눌러주세요.

✓
안내 : 개인정보는 종원연대의 회칙에 따라 종원연대의 활동 목적에만 활용됩니다.

const GOOGLE_SCRIPT_URL = “https://script.google.com/macros/s/AKfycbw3uFPtRVd_pAAd2aFey0aHyLZLEm3bNW5V6iRs1cy39cIVdtdcNd5SZxcEY5V4nrr7/exec”;

document.getElementById(“jongwonJoinForm”).addEventListener(“submit”, function(e){
e.preventDefault();

const form = e.target;
const btn = document.getElementById(“joinSubmitBtn”);
const result = document.getElementById(“joinResult”);

const data = {
memberCheck: form.memberCheck.value,
name: form.name.value.trim(),
birth: form.birth.value.trim(),
phone: form.phone.value.trim(),
branch: form.branch.value
};

if(!data.memberCheck || !data.name || !data.birth || !data.phone || !data.branch){
result.className = “join-result error”;
result.innerText = “모든 항목을 입력해 주세요.”;
return;
}

btn.disabled = true;
btn.innerText = “접수 중입니다…”;

fetch(GOOGLE_SCRIPT_URL, {
method: “POST”,
mode: “no-cors”,
headers: {
“Content-Type”: “application/json”
},
body: JSON.stringify(data)
})
.then(() => {
result.className = “join-result success”;
result.innerText = “가입 신청이 접수되었습니다. 확인 후 필요한 경우 연락드리겠습니다.”;
form.reset();
})
.catch(() => {
result.className = “join-result error”;
result.innerText = “접수 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.”;
})
.finally(() => {
btn.disabled = false;
btn.innerText = “🤝 종원연대에 가입합니다”;
});
});

위로 스크롤