<div class="dc-lgn">
<div class="dc-lgn__body">
<div class="dc-lgn__brand">
<span class="dc-lgn__mark" aria-hidden="true">일</span>
<h1 class="dc-lgn__title">다시 오셨네요</h1>
<p class="dc-lgn__sub">휴대폰 번호로 로그인하세요</p>
</div>
<form class="dc-lgn__form" action="#">
<div class="dc-lgn__field">
<label class="dc-lgn__label" for="dc-lgn-phone">휴대폰 번호</label>
<input class="dc-lgn__input" id="dc-lgn-phone" type="tel" inputmode="numeric" autocomplete="username tel" placeholder="010-0000-0000" value="010-1234-5678" />
</div>
<div class="dc-lgn__field">
<label class="dc-lgn__label" for="dc-lgn-pw">비밀번호</label>
<input class="dc-lgn__input" id="dc-lgn-pw" type="password" autocomplete="current-password" value="" />
</div>
<label class="dc-lgn__keep" for="dc-lgn-keep">
<input class="dc-lgn__check" id="dc-lgn-keep" type="checkbox" checked />
<span class="dc-lgn__keeptxt">로그인 상태 유지</span>
</label>
<button class="dc-lgn__go" type="submit">로그인</button>
</form>
<div class="dc-lgn__links">
<a class="dc-lgn__link" href="#">비밀번호 찾기</a>
<span class="dc-lgn__sep" aria-hidden="true">·</span>
<a class="dc-lgn__link" href="#">회원가입</a>
</div>
<div class="dc-lgn__alt">
<span class="dc-lgn__altlbl">다른 방법으로 로그인</span>
<button class="dc-lgn__sns" type="button">카카오로 계속하기</button>
</div>
</div>
<p class="dc-lgn__help">로그인이 안 되면 <a class="dc-lgn__link" href="#">고객센터</a> 로 연락하세요.</p>
</div>
.dc-lgn { display:flex; flex-direction:column; height:580px; overflow:hidden; background:var(--dc-bg); border:1px solid var(--dc-line); border-radius:var(--dc-r-md); font-family:var(--dc-font); }
.dc-lgn__body { flex:1 1 auto; min-height:0; overflow-y:auto; padding:calc(var(--dc-safe-top) + var(--dc-7)) var(--dc-5) var(--dc-5); }
.dc-lgn__brand { display:flex; flex-direction:column; align-items:flex-start; gap:var(--dc-1); margin-bottom:var(--dc-6); }
.dc-lgn__mark { display:grid; place-items:center; width:48px; height:48px; margin-bottom:var(--dc-3); border-radius:var(--dc-r-md); background:var(--dc-brand); color:var(--dc-text-on); font-size:22px; font-weight:800; }
.dc-lgn__title { margin:0; font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--dc-text); }
.dc-lgn__sub { margin:0; font-size:14px; color:var(--dc-text-sub); }
.dc-lgn__form { display:flex; flex-direction:column; gap:var(--dc-4); }
.dc-lgn__field { display:flex; flex-direction:column; gap:var(--dc-2); }
.dc-lgn__label { font-size:13px; font-weight:700; color:var(--dc-text-sub); }
.dc-lgn__input { width:100%; min-height:48px; 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-family:inherit; font-size:16px; }
.dc-lgn__input::placeholder { color:var(--dc-text-mute); }
.dc-lgn__input:focus { outline:none; border-color:var(--dc-brand); box-shadow:0 0 0 3px var(--dc-brand-soft); }
.dc-lgn__input.is-error { border-color:var(--dc-danger); background:var(--dc-danger-soft); }
.dc-lgn__err { margin:0; font-size:13px; font-weight:700; line-height:1.5; color:var(--dc-danger); }
.dc-lgn__keep { display:flex; align-items:center; gap:var(--dc-2); min-height:44px; }
.dc-lgn__check { width:20px; height:20px; accent-color:var(--dc-brand); }
.dc-lgn__keeptxt { font-size:14px; color:var(--dc-text); }
.dc-lgn__go { display:flex; align-items:center; justify-content:center; gap:var(--dc-2); width:100%; min-height:52px; border:0; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-family:inherit; font-size:16px; font-weight:700; }
.dc-lgn__go:active { background:var(--dc-brand-hi); }
.dc-lgn__go[disabled] { background:var(--dc-brand); opacity:.65; }
.dc-lgn__spin { width:16px; height:16px; border:2px solid var(--dc-text-on); border-top-color:transparent; border-radius:var(--dc-r-full); animation:dc-lgn-turn .7s linear infinite; }
@keyframes dc-lgn-turn { to { transform:rotate(360deg); } }
.dc-lgn__links { display:flex; align-items:center; justify-content:center; gap:var(--dc-2); margin-top:var(--dc-4); }
.dc-lgn__link { display:inline-flex; align-items:center; min-height:44px; color:var(--dc-brand-text); font-size:13px; font-weight:600; }
.dc-lgn__sep { color:var(--dc-text-mute); }
.dc-lgn__alt { display:flex; flex-direction:column; gap:var(--dc-3); margin-top:var(--dc-4); padding-top:var(--dc-5); border-top:1px solid var(--dc-line); }
.dc-lgn__altlbl { font-size:12px; color:var(--dc-text-mute); text-align:center; }
.dc-lgn__sns { width:100%; min-height:48px; border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-family:inherit; font-size:15px; font-weight:700; }
.dc-lgn__sns:active { background:var(--dc-sunken); }
.dc-lgn__help { flex:0 0 auto; margin:0; padding:var(--dc-3) var(--dc-5) calc(var(--dc-safe-bottom) + var(--dc-4)); background:var(--dc-surface); border-top:1px solid var(--dc-line); font-size:12px; color:var(--dc-text-mute); text-align:center; }