<form class="dc-signup" action="#" method="post" novalidate>
<div class="dc-signup__head">
<h2 class="dc-signup__title">회원가입</h2>
<p class="dc-signup__sub"><span class="dc-signup__req" aria-hidden="true">*</span> 는 반드시 적어야 하는 칸입니다.</p>
</div>
<div class="dc-signup__field">
<label class="dc-signup__label" for="dc-su-name">이름 <span class="dc-signup__req" aria-hidden="true">*</span></label>
<input class="dc-signup__input" id="dc-su-name" name="name" type="text" autocomplete="name" required>
</div>
<div class="dc-signup__field">
<label class="dc-signup__label" for="dc-su-mail">이메일 <span class="dc-signup__req" aria-hidden="true">*</span></label>
<input class="dc-signup__input" id="dc-su-mail" name="email" type="email" inputmode="email" autocomplete="email" placeholder="[email protected]" aria-describedby="dc-su-mail-hint" required>
<p class="dc-signup__hint" id="dc-su-mail-hint">가입 확인 메일이 이 주소로 갑니다.</p>
</div>
<div class="dc-signup__field">
<label class="dc-signup__label" for="dc-su-pw">비밀번호 <span class="dc-signup__req" aria-hidden="true">*</span></label>
<input class="dc-signup__input" id="dc-su-pw" name="password" type="password" autocomplete="new-password" aria-describedby="dc-su-pw-rule" required>
<p class="dc-signup__hint" id="dc-su-pw-rule">8자 이상, 영문과 숫자를 섞어 주세요.</p>
</div>
<div class="dc-signup__field">
<label class="dc-signup__label" for="dc-su-tel">휴대폰 번호</label>
<div class="dc-signup__row">
<input class="dc-signup__input" id="dc-su-tel" name="tel" type="tel" inputmode="numeric" autocomplete="tel" placeholder="010-0000-0000">
<button class="dc-signup__send" type="button">인증 요청</button>
</div>
</div>
<fieldset class="dc-signup__terms">
<legend class="dc-signup__legend">약관 동의</legend>
<label class="dc-signup__check dc-signup__check--all">
<input class="dc-signup__checkbox" type="checkbox">
<span class="dc-signup__check-text">전체 동의</span>
</label>
<label class="dc-signup__check">
<input class="dc-signup__checkbox" type="checkbox" required>
<span class="dc-signup__check-text">이용약관과 개인정보 처리에 동의 <span class="dc-signup__tag">필수</span></span>
</label>
<label class="dc-signup__check">
<input class="dc-signup__checkbox" type="checkbox">
<span class="dc-signup__check-text">새 공고 알림 받기 <span class="dc-signup__tag dc-signup__tag--opt">선택</span></span>
</label>
</fieldset>
<button class="dc-signup__submit" type="submit">가입하고 시작하기</button>
<p class="dc-signup__foot">이미 계정이 있으세요? <a class="dc-signup__link" href="#">로그인</a></p>
</form>
.dc-signup { display:flex; flex-direction:column; gap:var(--dc-4); width:100%; max-width:440px; margin-inline:auto; padding:var(--dc-6); border:1px solid var(--dc-line); border-radius:var(--dc-r-lg); background:var(--dc-surface); box-shadow:var(--dc-sh-1); font-family:var(--dc-font); }
.dc-signup__head { display:flex; flex-direction:column; gap:var(--dc-1); }
.dc-signup__title { font-size:20px; font-weight:700; letter-spacing:-.01em; color:var(--dc-text); }
.dc-signup__sub { font-size:12px; color:var(--dc-text-mute); }
.dc-signup__req { color:var(--dc-danger); font-weight:700; }
.dc-signup__field { display:flex; flex-direction:column; gap:var(--dc-2); }
.dc-signup__label { font-size:13px; font-weight:600; color:var(--dc-text); }
.dc-signup__input { width:100%; min-height:44px; padding:0 var(--dc-3); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-size:15px; transition:border-color var(--dc-fast), box-shadow var(--dc-fast); }
.dc-signup__input::placeholder { color:var(--dc-text-mute); }
.dc-signup__input:focus { border-color:var(--dc-brand); box-shadow:0 0 0 3px var(--dc-brand-soft); }
.dc-signup__input--bad { border-color:var(--dc-danger); }
.dc-signup__hint { font-size:12px; color:var(--dc-text-mute); }
.dc-signup__error { font-size:12px; color:var(--dc-danger); }
.dc-signup__row { display:flex; gap:var(--dc-2); align-items:center; }
.dc-signup__send { flex:0 0 auto; min-height:44px; padding:0 var(--dc-4); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-sunken); color:var(--dc-text); font-size:13px; font-weight:600; cursor:pointer; }
.dc-signup__send:hover { background:var(--dc-brand-soft); color:var(--dc-brand-text); }
.dc-signup__timer { font-size:12px; color:var(--dc-brand-text); }
.dc-signup__terms { display:flex; flex-direction:column; gap:var(--dc-1); margin:0; padding:var(--dc-3); border:1px solid var(--dc-line); border-radius:var(--dc-r-sm); background:var(--dc-sunken); }
.dc-signup__legend { padding:0 var(--dc-1); font-size:13px; font-weight:600; color:var(--dc-text); }
.dc-signup__check { display:flex; align-items:center; gap:var(--dc-2); min-height:44px; cursor:pointer; }
.dc-signup__check--all { padding-bottom:var(--dc-2); border-bottom:1px solid var(--dc-line); font-weight:700; }
.dc-signup__checkbox { flex:0 0 auto; width:20px; height:20px; accent-color:var(--dc-brand); }
.dc-signup__check-text { font-size:13px; line-height:1.45; color:var(--dc-text-sub); }
.dc-signup__tag { display:inline-block; margin-left:var(--dc-1); padding:1px var(--dc-2); border-radius:var(--dc-r-full); background:var(--dc-danger-soft); color:var(--dc-danger); font-size:11px; font-weight:700; }
.dc-signup__tag--opt { background:var(--dc-sunken); color:var(--dc-text-mute); }
.dc-signup__submit { min-height:48px; padding:0 var(--dc-4); border:1px solid transparent; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:15px; font-weight:700; cursor:pointer; transition:background var(--dc-fast); }
.dc-signup__submit:hover { background:var(--dc-brand-hi); }
.dc-signup__foot { font-size:13px; color:var(--dc-text-sub); text-align:center; }
.dc-signup__link { color:var(--dc-brand); }
@media (max-width:420px) {
.dc-signup { padding:var(--dc-4); }
.dc-signup__row { flex-wrap:wrap; }
.dc-signup__send { width:100%; }
}