@charset "UTF-8";

.wrap { width: 100%; height: inherit; min-height: inherit; }

.sign h2 { height: 80px; line-height: 80px; text-align: center;}
.sign .submit { margin-top: 20px; }
.sign .submit button { width: 100%; height: 48px; border-radius: 12px; }
.sign .sign-nav { margin-top: 20px; display: flex; justify-content: center; gap: 40px; }

.form-group:not(:first-of-type) { margin-top: 20px; }
.form-group > .label { margin-bottom: 4px; }

.check-box { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.check-box .label { position: relative; }
.check-box input[type="checkbox"] + label{ position: relative; margin: 0; padding-left: 24px; width: 100%; height: 32px; line-height: 32px; display: block; font-size: 15px; }
.check-box input[type="checkbox"] + label::before{ position: absolute; left: 0; top: 50%; content:""; width: 20px; height: 20px; display: block; border: 1px solid #e7e7e9; border-radius: 5px; transform: translateY(-50%); }
.check-box input[type="checkbox"]:checked + label::before{ position: absolute; left: 0; top: 50%; content: '✓'; line-height: 18px; width: 20px; height: 20px; display: block; font-size: 14px; border: 1px solid var(--main); color: var(--main); text-align: center; transform: translateY(-50%); }

.check-box button { padding: 0 12px; height: 32px; border-radius: 8px; font-size: 14px; }
.check-box:not(:first-of-type) { margin-top: 8px; }

.desc { margin-bottom : 20px; text-align: left; word-break: normal; overflow-wrap: anywhere; hyphens: auto; line-height: 1.5; }

/* PC */
@media screen and (min-width: 1025px) {
    .wrap { display: flex; padding: 50px 0; justify-content: center; align-items: center; }
    .sign { padding: 24px; width: 360px; border: 1px solid #e7e7e7; border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; background: #fff; }
    
}

/* 모바일 */
@media screen and (max-width: 1024px) {
    .sign { padding: 30px 16px 40px 16px; background: #fff; }
    
    .check-box input[type="checkbox"] + label { font-size: clamp(13px, 4.2vw, 15px); }
    .check-box button { height: clamp(30px, 4vw, 32px); font-size: clamp(13px, 4.2vw, 15px); }
}